React 状态（钩子）在使用 switch 时重新渲染时重置答案

【问题标题】：React state (hook) resets on re-render while using switchReact 状态（钩子）在使用 switch 时重新渲染时重置
【发布时间】：2021-02-21 07:29:45
【问题描述】：

见密码箱。 https://codesandbox.io/s/component-issue-snj24?file=/src/App.js:0-1254

每当 Main 重新渲染时，当前组件都会有条件地渲染，尽管 switch 将重置其状态 const [value, setValue] = React.useState(0)。

如果我采用任何组件（comp1、comp2、comp3）并将其插入主返回（替换），则不会发生这种情况。

-- 更新正如 Dennis 所注意到的，它是由于嵌套的函数。选择 https://codesandbox.io/s/component-issue-forked-uejy1

【问题讨论】：

请显示完整示例How to create a Minimal, Reproducible Example，“每当父级重新渲染时重置”，重置为什么？也许它是组件本身的一个错误。
更新了描述。
你能展示整个RenderActivePage组件吗？
这就是整个RenderActivePage 。基于“activePage”返回组件的开关。
再次更新。不知道如何才能使问题更简洁，非常直接。

标签： reactjs react-hooks

【解决方案1】：

我知道这已经回答了一段时间，但答案帮助我解决了我的问题，所以只想加我的 2 美分。似乎当子组件在父组件的任何条件内时，例如：

{ isTrue && <ChildComponent/> } 
// or  
{ isTrue ? <ChildComponent1/>  : <ChildComponent2/> }

或类似上面的开关，然后子组件被卸载并在每次重新渲染父组件时重新安装。这最终会在每次重新渲染父组件时重置子组件中的本地状态。为了解决这个问题，我最终将条件作为道具传递给孩子，即<ChildComponent isTrue={isTrue} />，然后有条件地在孩子内部渲染。

【讨论】：

【解决方案2】：

组件不会“重新渲染”它会卸载，因为您在函数体中声明了 RenderActivePage，在每次重新分配它的渲染时，这意味着它在每次渲染时重新安装。

export default function App() {
  // remounts on every render
  const RenderActivePage = () => {
    switch (activePage) {
      case 0:
        return <Comp1 />;
      case 1:
        return <Comp2 />;
      default:
        return <div></div>;
    }
  };

  return (
    <div className="App">
      <RenderActivePage />
    </div>
  );
}

【讨论】：

但是触发卸载的主value中未使用变量的更改，发生切换的activePage保持不变。
我改了答案没注意，你是对的，现在检查一下
啊，我明白了。没有考虑嵌套的函数，感谢您清理它。在原始帖子中发布替代品。