更新useContext数据后组件内useState状态被重置为默认值如何解决？

你遇到的state重置问题，本质是context更新触发了当前组件的卸载后重新挂载，而非普通重渲染。正常的组件重渲染只会触发函数执行，不会重置useState、useRef的取值，只有组件实例被销毁再重建时，才会重新读取useState的初始值赋值。

• 首先验证组件是否被卸载，在你的AddKnowledgeScreen组件中加入以下代码：

useEffect(() => {
  console.log('组件挂载')
  return () => console.log('组件卸载')
}, [])

点击按钮后如果先后打印「组件卸载」「组件挂载」，即可确认是卸载重挂载导致的问题。

• 检查上层路由配置：如果这个页面是通过路由跳转进入的，大概率是路由配置时用了匿名函数返回组件的写法，比如：

// 错误写法，每次渲染生成新的组件引用，触发子组件卸载重挂
<Stack.Screen name="AddKnowledge" component={() => <AddKnowledgeScreen />} />

修正为直接传递组件引用即可：

// 正确写法
<Stack.Screen name="AddKnowledge" component={AddKnowledgeScreen} />

如果需要给页面传递额外参数，可通过路由params、context或者render prop的children属性实现，不要直接用匿名函数生成组件。

• 检查组件调用处的key属性：如果AddKnowledgeScreen是在父组件中直接调用的，确认父组件给它传递的key属性不会随context更新而变化，key变动会直接触发React销毁旧组件实例、创建新实例。
• 检查Context Provider的位置：确认addKnowledgeContext的Provider没有放在会频繁卸载重渲染的组件内部，Provider应该放在尽可能上层、稳定的根组件位置，避免随业务逻辑更新被重新创建。

如果暂时无法定位上层组件的问题，可以把activeKnowlegeId状态也存入addKnowledgeContext中，用context来管理这个激活ID，就不会出现组件重挂载导致的取值重置问题。

内容的提问来源于stack exchange，提问作者Meisam Sabaghi