我是下面的错误。
Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
当尝试执行下面的map函数时,模拟API的链接是http://www.mocky.io/v2/5db88c413b00004f0b35f1f1 :
state = {
name: 'Teste II',
produto: null,
alternativas: null,
atributos: null,
loading_produto: true,
loading_alternativas: true,
loading_atributos: true,
showPopup: false,
};
constructor( props ) {
super( props );
}
async componentDidMount(){
const url = "http://www.mocky.io/v2/5db88c413b00004f0b35f1f1";
const response = await fetch(url);
const data = await response.json();
this.setState({produto: data.suggestions[0], loading_produto: false})
this.setState({alternativas: data.choices, loading_alternativas: false})
this.setState({atributos: data.suggestions[0].attributes, loading_atributos: false})
console.log(this.state.produto.product_data.title);
}
render() {
const lista_alternativas = this.state.alternativas;
const lista_atributos = this.state.atributos;
if(!this.state.loading_atributos){
this.atributos = lista_atributos.map((description, key) => {
console.log('chegou aqui');
return <li key={description.id}>{description.description}</li>
});
}
return (
出了什么问题?
最佳答案
检查该 URL 的响应,您正在将状态值“atributos”设置为 data.suggestions[0].attributes(该属性不存在)。
您可能希望将其更改为 data.suggestions[0].product_data.attributes。
更具体地说,将你的 componentDidMount 函数更改为:
async componentDidMount(){
const url = "http://www.mocky.io/v2/5db88c413b00004f0b35f1f1";
const response = await fetch(url);
const data = await response.json();
this.setState({produto: data.suggestions[0], loading_produto: false})
this.setState({alternativas: data.choices, loading_alternativas: false})
this.setState({atributos: data.suggestions[0].product_data.attributes, loading_atributos: false})
console.log(this.state.produto.product_data.title);
}
关于javascript - ReactJS 无法映射数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58614604/