为什么我的useState值在获取后是未定义的？好像 useState 不起作用

Question

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

function MainContent() {
    const [objectsArr, setObjectsArr] = useState(null);

    useEffect(() => {
        async function fetchMyAPI() {
            let response = await fetch('http://localhost:3030/pickedObjects')

            response = await response.json();
            setObjectsArr(response)
        }
        fetchMyAPI()
    }, [])

    const contentDiv = document.getElementsByClassName('content')[0];

    return (
        <ul className="content row">
            {objectsArr.map((item) => {
                return (
                    <ContentItem className="item" item={item} />
                )
            })}
        </ul>
    );
}

export default MainContent;

我正在尝试使用调用 fetch 的 useEffect 来渲染元素数组，并且我使用 .map() 直接渲染它们

因此，当我尝试运行此程序时，出现错误：

未捕获的类型错误：无法读取 null 的属性（读取“地图”）

这是一个 setObjectsArr 初始值。那么 useEffect 中的 setObjectsArr(response) 是没有设置，还是设置得太早了？

我该如何解决这个问题？

我几乎尝试了所有方法，但找不到它不起作用的原因。fetch 本身没问题，它返回一个不错的值，但 useState 没有设置它。

Answer 1

无法读取 null 的属性（读取“地图”）

因为您将初始值定义为

null

:

const [objectsArr, setObjectsArr] = useState(null);

并尝试致电

.map()

：

objectsArr.map((item) => {

这一切都发生在任何 API 交互发生之前。 API 调用的结果可能确实是一个数组（我们不知道，但想必这就是您所期望的），并且状态将在稍后更新为该值。但在那之前，您需要一个可以正确渲染的组件。

听起来空数组是更明智的默认值：

const [objectsArr, setObjectsArr] = useState([]);

或者，在使用之前检查该值。例如，使用可选链：

objectsArr?.map((item) => {

或者检查虚假性：

objectsArr && objectsArr.map((item) => {