Reactjs useState集返回空对象

我的组件代码如下所示：

const [imageMap, setImageMap] = useState([]);

//...

useEffect(async () => {
        const x = await getList();
        setImageMap(x);
}, []);

console.log(imageMap);

log工作正常，并打印从函数getList返回的列表，这是一个承诺，需要一段时间才能完成，因为它从internet检索数据

在组件的return语句中，我使用imageMap.mapitem=>。。。显示imageMap的所有元素，但它似乎是空的，因为没有显示任何内容。我做错什么了吗？

imageMap.mapitem=>。。。可能在接收数据之前执行。

const [imageMap, setImageMap] = useState([]);

//...

useEffect(() => {
        async function fetchData() {
            const x = await getList();
            setImageMap(x);
        }
        fetchData()
}, []);

// This will run one time
console.log(imageMap);

// This will run on each change    
useEffect(() => {
    console.log(imageMap);
}, [imageMap]);

在执行imageMap.mapitem=>…之前添加一个条件，以检查imageMap是否为空

大概是这样的：

const [imageMap, setImageMap] = useState([]);

//...

useEffect(async () => {
        const x = await getList();
        setImageMap(x);
}, []);

console.log(imageMap);

如果imageMap.length！==0 { imageMap.mapitem=>。。。

---

}第一次渲染将使用默认的空数组。然后，当getList完成并且设置了更新的状态时，它会使用更新的数组触发另一个渲染。在该请求完成之前，您正在进行日志记录。但是日志是正确的，它会按原样打印列表。另一方面，return语句没有给我任何信息，就好像imageMap是空的一样。看到了吗，用这个stringify它不会打印任何东西，否则没有，它会打印，非常奇怪。有没有办法解决这个问题？日志部分只是为了说明我的函数正在工作并返回内容，但问题是当我在return语句中需要它时，状态是空的。如果您阅读Wierd行为链接，这并不奇怪。我不认为你可以使useEffect回调本身异步，第一个答案是正确的方法一个教育性的解释可能会有帮助，但它不起作用，而且似乎与我已有的没有太大的不同。@charlietfl在前面的语法中承诺将返回useEffect，但它希望回调或什么都不会返回回答并解释你做了什么，以及为什么阅读本文的其他人会理解。只有代码的答案不是很好helpful@Danielconsole.log在useEffect之外，因此它将在第一次渲染时登录。如果需要在每次更改中记录imageMap，则必须将其放入另一个useEffect中。但是您需要在要监视的useEffect的第二个参数中的空数组中传递imageMap，但是我将始终使imageMap为空，并且它永远不会正确渲染。