组件切换时状态不会重置

Question

我一直在尝试有条件地显示组件。外部处理：{show && <MyComponent />}内部处理：const MyComponent = () => {    const [externalState] = useContext();    const [state, setState] = useState("")         // Don't render base on some state value     if(externalState === false) return null;     return <input value={state} onChange={e=>setState(e.currentTarget.value)} type="text"/>}我注意到在第二种方法中，当我打开和关闭组件时，状态不会重置。有没有办法解决这个问题，或者不推荐第二种方法。

Answer 1

您会看到状态保留的不同行为的原因是，MyComponent只要条件发生变化，第一个方法就会挂载或卸载。

如果show为 false，MyComponent则不仅是隐藏，而且实际上是从 DOM 中删除。

在第二种方法中，仅从DOM 中删除返回的 JSX，组件的其余部分保持安装状态，这意味着状态得到维护。MyComponent

至于“修复”问题（大多数人实际上会看到状态丢失是一个错误，所以这是一个不同的视角），最简单的方法是继续使用选项 1。你当然可以使用选项 2，但你必须每次show更新内部管理时添加一些额外的逻辑/函数调用来重置状态。