为什么我必须通过 React 中的 useEffect 挂钩更新内部状态？答案

【问题标题】：Why I have to update inner state through the useEffect hook in React?为什么我必须通过 React 中的 useEffect 挂钩更新内部状态？
【发布时间】：2021-06-12 10:30:30
【问题描述】：

也许我对反应流的理解有误，但有人可以解释一下这个魔法:)

为什么我必须通过 React 中的 useEffect 挂钩更新内部状态？

我以为组件更新会触发重写useState钩子的初始状态。

  const [list, setList] = useState<TabItem[]>(tabs);

  useEffect(() => {
    setList(tabs);
  }, [tabs]);

【问题讨论】：

什么是“内在状态”？初始状态仅在状态实例化时被引用一次，与其他所有内容分开。此示例中的useEffect 将在状态被实例化并渲染出组件之后运行，并且您不需要useEffect 挂钩来更新状态，您可以在任何地方调用状态更新程序。你的问题不是很清楚。也许您可以包含一个更全面的代码示例？

标签： reactjs react-hooks

【解决方案1】：

问题是当 React 重新渲染功能组件时，状态钩子React.useState(tabs) 不会再次执行。

这就是为什么之前的状态会持续到下一个渲染周期。

因此，为了让您的道具派生到您的内部状态，您可以在 React.useEffect() 挂钩中提供 tabs 道具，以便 useEffect 回调将再次运行并使用 setList(tabs) 再次设置状态。

【讨论】：