Reactjs 从 Api 获取数据？

Question

我正在从服务器获取图像。 为什么 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>
    );
};

Answer 1

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

请参阅此以获取参考 -

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• https://javascript.info/async-await