使用 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

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

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

是一种方法。

Answer 2

首先，如果你要去.map到this.state.items，它不能在任何时候undefined，否则你会抛出一个错误（.map需要一个数组）。因此，在您的构造函数中，将其定义为一个空数组：

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

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