React：在带有值的对象上设置状态后，状态包含空对象

Question

当然有很多关于的 问题和 答案，我已经尝试查看它们，但还没有找到与我的问题非常相似而有用的问题（或解决方案）。仍然很可能有一个解决这个问题的方法，如果是这样，请指出，并对重复的内容表示歉意。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.log：

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，但如果确实如此，我就不知所措了。（例如，这个答案似乎表明只要在 的末尾传入一个空数组useEffect，一切都应该很好。）

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

谢谢！

Answer 1

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

state是一个局部常量。它永远不会改变，这也不是我们setState想要做的。调用setState的目的是告诉react重新渲染组件。当组件重新渲染时，将创建一个新的本地常量，它将具有该新值。新渲染中的代码可以访问该新值，但旧渲染中的代码仍然引用以前的值。

因此，如果您想验证它是否使用新值重新渲染，请将日志语句放入组件的主体中，以便它可以在渲染时记录：

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))

},[])