Question

我正在尝试渲染我创建的简单api的响应，但是当我尝试迭代这些项时，它是未定义的。我知道它与异步编程有关，但无法弄清楚如何解决它。有人可以帮忙吗？

＆＃13;

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>
        );
    }
}

＆＃13;

Answer 1

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

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

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

Answer 2

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

是一种方法。

使用React.js渲染API响应

2 个答案: