我有一个 React 函数组件,它监听按钮的点击并相应地更改状态。 我可以看到状态确实随着 View 中的重新显示而发生了变化。然而,当尝试读取当前状态时 - 它似乎仍然是初始状态:
import React from "react";
export default function App() {
const [state, setState] = React.useState("Not Changed");
const [print, setPrint] = React.useState(null);
const change = () => {
setState("Changed!!!");
};
React.useEffect(() => {
setPrint(() => {
return () => {
console.warn("state > ", state); //=> "state > Not Changed"
};
});
}, []);
return (
<div className="App">
<div style={{ border: "1px solid black", marginBottom: "30px" }}>
<button onClick={change}>Change State</button>
<div>{state}</div>
</div>
<button onClick={print}>Print State</button>
</div>
);
}
您还可以在此处查看代码的工作原理: https://codesandbox.io/s/sweet-lalande-x8w6p?file=/src/App.js
在浏览器中 - 我看到 html 已更新为“已更改!!!”。但在控制台中,我仍然看到打印“state > Not Changed”。
我真的很感谢有人帮助我找到我在这里缺少的东西。谢谢!
最佳答案
将state
传递给useEffect
:
React.useEffect(() => {
setPrint(() => {
return () => {
console.warn("state > ", state);
};
});
}, [state]);
关于javascript - 尝试读取 React 状态会给出初始状态而不是更新后的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61175570/