Question

你好，我正在尝试从嵌套的JSON对象迭代和渲染数据。我可以访问第一层数据，但是不能访问嵌套数据。我收到错误“ TypeError：无法读取未定义的属性'名称'”。我了解为何this.state.coinData未定义但无法将其放入代码中。请帮忙！

class CoinList extend Component {
    //...
    constructor(props) {
        super(props);
        this.state = {
            coinData: [],
        };
    }

    componentDidMount() {
        const apiKey = ####################;

        fetch('https://api.nomics.com/v1/currencies/ticker?key=' + apiKey +"&interval=1d")
        .then(response => response.json()) 
        .then(data => this.setState({ coinData: data })) 
        .catch(error => console.log(error)) 
      } 

    render() {
        return(
            <div className="Table-container">
                <table>
                    <thead>
                        <tr>
                            <th> h1 </th>
                            <th> h2 </th>
                            <th> h3 </th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.coinData.map((coin) =>
                            <tr key={coin.id}>
                                <td> {coin.currency} </td>
                                <td> {coin.rank} </td>
                                <td>  </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        )

    }
}

export default CoinList;

我尝试访问的

JSON数据：

Answer 1

在调用API并通过componentDidMount填充状态为空的数组之前，似乎正在使用tmap中的.map方法进行渲染。

尝试添加条件以在映射之前检查coinData数组是否具有任何值（例如，仅当该数组具有值时，运行映射代码）。这样，页面将呈现，然后组件将被挂载，API将被调用并以状态填充数组，然后页面将重新呈现。

Answer 2

使用其他示例API，即使延迟了API的响应，我也不会遇到任何让您的代码运行的问题。您是否有可能在某个地方输入错误，或者您的API没有返回任何内容？

codesandbox

迭代反应嵌套对象

2 个答案: