Reactjs 从 Api 获取数据？答案

【问题标题】：Reactjs fetch data from Api?Reactjs 从 Api 获取数据？
【发布时间】：2020-07-30 02:43:14
【问题描述】：

我正在从服务器获取图像。为什么useEffect里面的console.log(images)是一个空数组，而useEffect外面却是返回数据。

const ImageGrid = () => {
    const [images, setImages] = useState([]);

    useEffect(() => {
        fetch(`https://api.unsplash.com/photos/?client_id=${key}&per_page=28`)
            .then(res => {
                return res.json();
            })
            .then(images => {
                setImages(images);
            });
        console.log(images);
    }, []);

    console.log(images);
    return (
        <div className="content">
            <section className="grid">
                {images.map(image => (
                    <div>
                        <img src={image.urls.small} alt={image.user.username} />
                    </div>
                ))}
            </section>
        </div>
    );
};

【问题讨论】：

useEffect 的正文没有按照您认为的顺序执行。它会调用 fetch 然后立即调用你的 console.log。您应该将您的 console.log(images) 移动到数据返回后调用的最后一个回调中
把你的console.log放在最后一个“then”语句中。

标签： reactjs

【解决方案1】：

首先您需要知道 API 调用是异步的。它们的返回值是一个承诺。
因此，在useEffect 内部的示例中，您使用fetch 调用API，所以基本上它是异步的。一旦 API 调用根据返回的承诺状态完成，它就会调用 then 块或 catch 块。
如果 promise 成功解决，则调用 then 块，否则如果 promise 被拒绝，则进入 catch 块。
现在，useEffect 中的 console.log 不会记录数据，因为它会在调用 API 后立即执行，并且不会等待 API 响应返回。
而在console.log 之外正在记录数据，因为在then 块内返回响应后，您正在调用setImages，因此在调用此函数后，您的函数组件会重新渲染，这会导致您的第二个console.log 打印数据。

参考这里-

【讨论】：