组件切换时状态不会重置

我一直在尝试有条件地显示组件。


外部处理:


{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"/>


}

我注意到在第二种方法中,当我打开和关闭组件时,状态不会重置。有没有办法解决这个问题,或者不推荐第二种方法。


慕慕森
浏览 77回答 1
1回答

慕少森

您会看到状态保留的不同行为的原因是,MyComponent只要条件发生变化,第一个方法就会挂载或卸载。如果show为 false,MyComponent则不仅是隐藏,而且实际上是从 DOM 中删除。在第二种方法中,仅从DOM 中删除返回的 JSX,组件的其余部分保持安装状态,这意味着状态得到维护。MyComponent至于“修复”问题(大多数人实际上会看到状态丢失是一个错误,所以这是一个不同的视角),最简单的方法是继续使用选项 1。你当然可以使用选项 2,但你必须每次show更新内部管理时添加一些额外的逻辑/函数调用来重置状态。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript