使用 React Hooks 获取和呈现数据时出现片状错误

Question

我正在从 API 中获取数据并呈现结果。这工作了一段时间然后我收到以下错误：itemList.js:23 Uncaught TypeError: items.map is not a function & also Consider adding an error boundary to your tree to customize error handling behavior.

关于为什么会发生这种情况的任何想法？

这是我的代码示例：

import React, { useEffect, useState } from "react";

const ItemList = () => {
    const [items, setItem] = useState("");

    useEffect(() => {
        const url = "<redacted-api-endpoint>";

        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const json = await response.json();

                return setItem(json.data);
            } catch (error) {
                console.log("error", error);
            }
        };

        fetchData();
    }, []);

    return (
        <>
            {
                items.map((item, index) => {
                    const { name, title, description, image, price } = item;

                    return (
                        <div key={index}>
                            <img src={image} alt="item" width="100" height="auto" />
                            <p>{name}</p>
                            <p>{title}</p>
                            <p>{description}</p>
                            <p>{price}</p>
                        </div>
                    )
                })
            }
        </>
    );
};

export default ItemList;

Answer 1

useEffect(callback, dependencies)是挂载组件后运行的side-effects钩子，它管理功能组件中的side-effects。回调参数是放置 side-effect 逻辑的函数。 dependencies 是你的 side-effect 的依赖列表：作为道具或状态值。 useEffect(callback, dependencies) 在 初始安装 之后调用回调，如果依赖项中的任何值发生变化，则在以后的渲染中调用回调。

在您的 first/initial 渲染中，组件安装时其初始状态为 const [items, setItem] = useState("");，并且您映射的是一个空字符串。

Solution:

考虑添加短路，或在初始状态添加项目以防止错误。

    <>
            {
                items && items.map((item, index) => {
                    const { name, title, description, image, price } = item;

                    return (
                        <div key={index}>
                            <img src={image} alt="item" width="100" height="auto" />
                            <p>{name}</p>
                            <p>{title}</p>
                            <p>{description}</p>
                            <p>{price}</p>
                        </div>
                    )
                })
            }
        </>

快速浏览一下关于 useEffect hook

的官方 React 文档

使用 React Hooks 获取和呈现数据时出现片状错误

Flaky errors when fetching & rendering data using React Hooks

javascript

arrays

reactjs

asynchronous

fetch