直接使用useEffect的依赖数组中包含的几个状态答案

【问题标题】：Directly using several states included in useEffect's dependency array直接使用useEffect的依赖数组中包含的几个状态
【发布时间】：2022-07-05 15:41:12
【问题描述】：

考虑在依赖数组中具有 2 个不同状态的 useEffect。每当更新这两个状态中的任何一个时，useEffect 挂钩都会运行，但是如果我更新其中一个，我是否可以访问 useEffect 中另一个的最新值？如果没有，最好的方法是什么？

function Component() {
  const [state1, setState1] = useState('');
  const [state2, setState2] = useState('');

  useEffect(() => {
    console.log(state1, state2)
  }, [state1, state2]);
  
  return <>...</>
}

【问题讨论】：

标签： reactjs dependencies use-effect

【解决方案1】：

useEffect 内部的回调将根据依赖数组有条件地在渲染后运行。如果您的状态值在同一个渲染周期中更新，那么它们会被批处理（通过 React），并且下一个渲染周期将在 useEffect 回调中显示两个正确的值。

如果您只更新其中任何一个，则不必担心另一个值，因为useEffect 中的回调也将使用另一个变量最近更新的值。

注意：您可能会遇到问题的唯一情况是由于关闭而导致状态值过时，但这是特定情况。

【讨论】：