反应：在对象上设置状态后，状态包含空对象，并带有值

Question

关于setState，肯定有很多问题和答案，我也试过去看，但还没有发现一个与我的问题（或解决方案）非常相似的问题（或解决方案）有用。仍然很有可能有人在处理这个问题，如果是的话，请指出，并为重复的内容道歉。

以下是功能组件的相关代码：

const [ state, setState ] = useState({})

useEffect(data => {
     const getFromServer = axios.get('http://localhost:3030/poolInfo')
        .then(res => {
            console.log("RES.DATA LOOKS LIKE THIS:, ", res.data);
            setState(res.data);  // I also tried setState({...res.data})
            console.log("IN AXIOS, STATE IS NOW: ", state);
        })
        .catch (err => console.error("YO YOU GOT AN ERROR IN AXIOS ", err))

},[])

下面是上面两个console.log的结果：

RES.DATA如下所示：，对象{balance:10000000000000000，feeAndSplit:Array[500,20]}

在AXIOS中，状态现在是：对象{}

第一个console.log显示的数据与我预期的完全相同。（与Postman使用相同的API也会返回相同的数据。）我调用setState，调用的变量与一秒钟前日志中刚包含数据的变量完全相同，然后poof！现在它是一个空的对象。

我想可能是console.log本身对res.data做了一些奇怪的事情，所以我也试着注释了第一个console.log，但仍然得到了相同的结果。

我想知道这是否与在use效应中设置状态有关，但是如果有的话，我就不知所措了。例如，这个答案似乎表明，只要在use效应的末尾传入一个空数组，一切都应该很好。）

res.data发生了什么，和/或如何设置状态？

谢谢




Answer 1

一切正常，只是你把日志语句放在了一个无用的地方。

state是一个本地常量。它永远不会改变，这不是setState试图做的。调用setState的目的是告诉响应重新呈现组件。当组件重新渲染时，将创建一个新的本地const，它将具有该新值。新渲染中的代码可以访问该新值，但旧渲染中的代码仍然引用以前的值。

因此，如果要验证是否使用新值重新渲染，请将log语句放在组件主体中，以便在渲染时可以记录：

const [ state, setState ] = useState({})
console.log("Rendering with: ", state);

useEffect(data => {
     const getFromServer = axios.get('http://localhost:3030/poolInfo')
        .then(res => {
            console.log("RES.DATA LOOKS LIKE THIS:, ", res.data);
            setState(res.data);
        })
        .catch (err => console.error("YO YOU GOT AN ERROR IN AXIOS ", err))

},[])