我正在尝试从 .json 文件中获取数据。页面上没有显示任何内容。也许有人知道为什么?谢谢! 这是文件上的链接 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;
最佳答案
这是我对给出的练习的回答。我想分享这个,因为你已经尝试过了。可能有不同的方法可以做到这一点。走自己的路。这是我的做法。
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;
关于json - 使用 axios 渲染 json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43959676/