ReactJS 无法映射数组答案

【问题标题】：ReactJS is not being able to map an arrayReactJS 无法映射数组
【发布时间】：2019-10-29 20:03:57
【问题描述】：

我是下面的错误。

Uncaught (in promise) TypeError: Cannot read property 'map' of 未定义

尝试执行下面的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 (

怎么了？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

检查该 URL 的响应，您将状态值“atributes”设置为 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);
}

【讨论】：

【解决方案2】：

尝试将属性的初始状态设置为空数组而不是null：

state = {
        name: 'Teste II', 
        produto: null,
        alternativas: null,
        atributos: [],
        loading_produto: true,
        loading_alternativas: true,
        loading_atributos: true,
        showPopup: false,
    };

【讨论】：