组件切换时状态不会重置

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中删除的。

在第二种方法中，只有从MyComponent返回的JSX从DOM中移除，其余组件保持挂载状态，即状态已维护。

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

组件切换时状态不会重置

State not reset when component toggles

javascript

reactjs

use-state