React中的一个常见问题，尤其是初学者（比如我）。这是由于setState是一个异步函数，React不会逐个更改值，而是在没有其他指示的情况下累积一些池。（如果措辞错误，请纠正我）
所以问题来了。一个简单的解决方案是将所需的状态放入useEffect依赖项数组中。例如，我有这样一个组件：
const [first, setFirst] = useState()
const [second, setSecond] = useState()
useEffect(() => {
Something logic by first and second...
}, [first])这里，useEffect在每次第一个状态改变时执行。同时，在它运行的时刻，第二个状态是不相关的，下一次它将变成现在应该的样子，依此类推。总是落后一步。
但是如果我向useEffect依赖项数组添加第二个状态，那么一切都将正常工作。
useEffect(() => {
Something logic by first and second...
}, [first, second])同时，useEffect不需要改变第二个状态，我添加它只是为了在useEffect中有一个最新的版本。我可以这样使用useEffect依赖数组吗？
2条答案
按热度按时间vi4fp9gy1#
如果您使用useEffect和一个空数组，它将充当componentDidMount和componentWillUnmount，因此它将只在第一次创建组件时和将要卸载组件时调用自身。
https://reactjs.org/docs/react-component.html#componentdidmount
cnh2zyt32#
在这里我得到了你所面临的问题，我不完全确定，但在我的情况下，我是console.log（result）在改变状态的函数中，但它总是落后一步。这是为什么？因为在React中，它被认为是副作用。所以如果您使用console.log（result）在useEffect中传递依赖数组中的值，然后，它会在控制台上记录即时更改的相同值。在后台，状态在完全相同的时间更新，但useEffect会在它被更改时检测到它。你也可以在useEffect中或者在你要更新的函数中写任何逻辑。所以在你点击时调用的函数中写逻辑应该没有任何问题。