javascript - ReactJS 无法映射数组

Question

我是下面的错误。

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 (

出了什么问题？

Answer 1

检查该 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);
}