javascript - 使用 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，它在任何时候都不能是未定义的，否则你会抛出一个错误(.map 需要一个数组)。因此，在您的构造函数中，将其定义为空数组:

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

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