使用 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，它在任何时候都不能未定义，否则你会抛出一个错误（.map期望一个大批）。因此，在您的构造函数中，将其定义为一个空数组：

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

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

中获取数据

使用 React.js 渲染 API 响应

Render API response with React.js

javascript

iteration

reactjs