React useEffect钩子中无法更新state的问题求助

你的代码里有几个关键问题导致state更新后没正确渲染：

1. State类型不匹配+更新逻辑错误 #

你初始把data设为数组[]，但请求返回的是单个产品对象，之后用setData把它变成了{responseJson: 产品对象}的结构——这就导致：

• 后续判断data.length > 0永远为false，因为对象没有length属性
• 就算想渲染，data.map也会报错，因为对象不能用数组的map方法

2. 错误的state更新后即时读取 #

setData是异步操作，调用后立刻console.log(data)拿到的永远是更新前的旧值，这是React的state更新机制决定的，和async函数无关。

修正后的代码（单个产品场景） #

import { useEffect, useState } from "react"

function RenderBody() {
    // 初始state设为null，匹配返回的单个产品对象类型
    const [data, setData] = useState(null)

    useEffect(() => {
        async function fetchData() {
            const response = await fetch('https://dummyjson.com/products/1')
            const responseJson = await response.json();
            console.log(responseJson);
            // 直接将返回的产品对象赋值给data
            setData(responseJson);
        }
        fetchData();
    }, []);
    
    return (
        <>
            {/* 判断data是否存在，而非判断length */}
            {data ? (
                <>
                    <div>{data.brand}</div>
                    <div>{data.price}</div>
                </>
            ) : <div>Nothing to display</div>}
        </>
    )
}

export default RenderBody

如果需要把data存为数组（支持多产品场景） #

import { useEffect, useState } from "react"

function RenderBody() {
    const [data, setData] = useState([])

    useEffect(() => {
        async function fetchData() {
            const response = await fetch('https://dummyjson.com/products/1')
            const responseJson = await response.json();
            // 将单个产品对象加入数组，保留之前的state内容
            setData(prev => [...prev, responseJson]);
        }
        fetchData();
    }, []);
    
    return (
        <>
            {data.length > 0 ? data.map(element => (
                {/* 必须给map的元素加唯一key */}
                <div key={element.id}>
                    <div>{element.brand}</div>
                    <div>{element.price}</div>
                </div>
            )) : <div>Nothing to display</div>}
        </>
    )
}

export default RenderBody

补充：验证state更新成功的正确方式 #

如果想确认state更新后的值，不要在setData后直接log，而是加一个监听data的useEffect：

useEffect(() => {
    console.log("更新后的data:", data);
}, [data]);

内容的提问来源于stack exchange，提问作者KALYAN