React：状态在具有值的对象上的 setState 之后包含空对象

Question

肯定有 lot of questions 和关于 setState 的答案，我已经尝试查看它们，但没有找到与我的非常相似的问题（或解决方案）有用。仍然很有可能有一个可以处理这个问题，如果是这样，请指出，并为重复道歉。

这是来自功能性 React 组件的相关代码：

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.logs的结果：

RES.DATA LOOKS LIKE THIS:, Object { balance: 1000000000000000000, feeAndSplit: Array [500, 20] }

IN AXIOS, STATE IS NOW: Object { }

第一个console.log 显示的数据完全符合我的预期。 （使用 Postman 访问相同的 API 也会返回相同的数据。）我在字面上调用 setState 上的变量是一秒钟前刚刚在日志中有数据的变量，然后噗！现在它是一个空对象。

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

我想知道这是否与在useEffect 中设置状态有关，但如果是这样，我就不知所措了。 （比如this的答案似乎表明只要在useEffect的末尾传入一个空数组，一切都应该没问题。）

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

谢谢！

Answer 1

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

state 是一个本地常量。它永远不会改变，这不是setState 想要做的。调用 setState 的目的是告诉 react 重新渲染组件。当组件重新渲染时，将创建一个新的本地 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))

},[])