使用React.js渲染API响应

Question

我正在尝试呈现我创建的简单api的响应，但是当我尝试遍历项目时，它的定义是不确定的。 我知道它与异步编程有关，但无法弄清楚如何解决它。 有人可以帮忙吗？

 import React from 'react'; export default class Home extends React.Component { constructor(props) { super(props); this.state = { items: undefined }; } componentDidMount() { fetch('https://petzie-cajuhqnpqy.now.sh/breeds') .then(res => res.json()) .then(data => { this.setState(() => { return { items: data.result }; }); console.log(this.state); }) .catch(err => console.log(err)); } render() { return ( <div> { this.state.items.map((item) => { return <p>{item.name}</p>; }) } </div> ); } } 

Answer 1

首先，如果要通过this.state.items进入.map ，则在任何时候都this.state.items定义它，否则会引发错误（ .map需要一个数组）。 因此，在构造函数中，将其定义为一个空数组：

constructor(props) {
    super(props);
    this.state = { items: [] };
}

其次， setState是异步的。 因此，当您立即调用setState和this.state时，该对象尚未更新。 但是由于React的性质，每当更新它时，都会再次调用您的渲染函数，这一次this.state.items将从API中获取数据。

Answer 2

如果您有异步调用，则需要执行以下操作：

render() {
    if(!this.state.items) { 
        return <div></div> 
    }
    return (
        <div>    
            { this.state.items.map((item) => {
                return <p>{item.name}</p>;
            }) }         
        </div>
    );
}

是做到这一点的一种方法。