无法在react useEffect hook 中更新状态

Question

即使使用异步后，我也无法更新 useEffect 中的数据。 注意：我不想在 useEffect 中添加数据作为依赖项，因为我只想获取一次数据

import { useEffect, useState } from "react"

function RenderBody() {

    let [data, setData] = useState([])

    useEffect(() => {
        async function fetchData() {
            let response = await fetch('https://dummyjson.com/products/1')
            let responseJson = await response.json();
            console.log(responseJson);
            await setData((prevData) => {
                return {...prevData, responseJson}
            });
            console.log(data);
        }
        fetchData();
    }, []);
    
    return (
        <>
            {data.length > 0 ? data.map(element => {
                return <>
                    <div>{element.brand}</div>
                    <div>{element.price}</div>
                </>
            }) : <div>Nothing to display</div>}
        </>
    )
}

export default RenderBody ```

Answer 1

我无法更新useEffect中的数据

当然可以，而且你确实可以。但你要更新它到什么呢？状态值最初是一个数组：

let [data, setData] = useState([])

最初 UI 不会显示任何内容，因为它检查数组的

length

属性：

data.length > 0 ? ...

然后将状态更新为一个对象：

await setData((prevData) => {
    return {...prevData, responseJson}
});

由于该对象没有

length

属性，因此

data.length

是

undefined

。并且

undefined

不是

> 0

，因此 UI 继续成功地不显示任何内容。

假设

responseJson

是要添加到数组中的对象，看起来您只是想扩展到数组而不是对象中：

await setData((prevData) => {
    return [...prevData, responseJson]
});