使用 axios 渲染 json 数据 [英] Rendering json data with axios
问题描述
我正在尝试从 .json 文件中获取数据.页面上没有显示任何内容.也许有人知道为什么?谢谢!这是文件上的链接https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json
从'react'导入React;从'create-react-class'导入createReactClass;从 'react-dom' 导入 ReactDOM;从 'axios' 导入 axios;类数据扩展了 React.Component {构造函数(道具){超级(道具);this.state = {大批: []};}componentDidMount(){公理.get('https://crossorigin.me/https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json').then(({数据})=>{this.setState({数组:data.recipes.Ingredients});}).catch((错误)=>{})}使成为() {const child = this.state.array.map((element, index) => {返回 <p>{ element.data.name }</p>});返回 <div><div>{ child }</div></div>;}}导出默认数据;
这是我对给出的练习的回答.我想分享这个,因为你已经尝试过了.可能有不同的方法来做到这一点.走自己的路.我是这样做的.
import React, { Component } from 'react';从 'react-dom' 导入 ReactDOM;从 'axios' 导入 axios;从'lodash'导入_;类数据扩展组件{构造函数(道具){超级(道具);this.state = {大批: []};this.renderRecipes = this.renderRecipes.bind(this);}componentDidMount(){公理.get('https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json').then(({数据})=>{控制台日志(数据);这个.setState({ 数组:data.recipes });}).catch((错误)=>{})}使成为() {控制台日志(this.state.array);返回(<div><h3>食谱</h3><ul className="list-group">{this.renderRecipes()}
);}渲染食谱(){控制台日志(this.state.array);返回 _.map(this.state.array, recipe => {返回 (<li className="list-group-item" key={recipe.name}>{食谱名称}<ul className="list-group">原料:{this.renderIngredients(recipe)});});}渲染成分(配方){返回 _.map(recipe.Ingredients, 成分 => {返回 (<li className="list-group-item" key={ingredient.name}><p>名称:{ingredient.name},金额:{ingredient.amount}</p>);});}}导出默认数据;
I'm trying to get data from .json file. Nothing appears on the page. Maybe somebody have an idea why? Thanks! This is link on the file https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import axios from 'axios';
class Data extends React.Component {
constructor(props) {
super(props);
this.state = {
array: []
};
}
componentDidMount(){
axios
.get('https://crossorigin.me/https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
.then(({ data })=> {
this.setState({
array: data.recipes.Ingredients
});
})
.catch((err)=> {})
}
render() {
const child = this.state.array.map((element, index) => {
return <div key={index}>
<p>{ element.data.name }</p>
</div>
});
return <div><div>{ child }</div></div>;
}
}
export default Data;
Here's my answer to the exercise given. I would like to share this, since you have tried that out. There may be different ways of doing this. Follow your own way. Here's how I did it.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';
class Data extends Component {
constructor(props) {
super(props);
this.state = {
array: []
};
this.renderRecipes = this.renderRecipes.bind(this);
}
componentDidMount(){
axios
.get('https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
.then(({ data })=> {
console.log(data);
this.setState(
{ array: data.recipes }
);
})
.catch((err)=> {})
}
render() {
console.log(this.state.array);
return(
<div>
<h3>Recipes</h3>
<ul className="list-group">
{this.renderRecipes()}
</ul>
</div>
);
}
renderRecipes() {
console.log(this.state.array);
return _.map(this.state.array, recipe => {
return (
<li className="list-group-item" key={recipe.name}>
{recipe.name}
<ul className="list-group">
Ingredients:
{this.renderIngredients(recipe)}
</ul>
</li>
);
});
}
renderIngredients(recipe) {
return _.map(recipe.Ingredients, ingredient => {
return (
<li className="list-group-item" key={ingredient.name}>
<p>Name: {ingredient.name}, Amount: {ingredient.amount}</p>
</li>
);
});
}
}
export default Data;
这篇关于使用 axios 渲染 json 数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!