React Native：DataContext更新后组件未刷新及数据重置问题求解

问题根源 #

1. 上下文实例隔离：设置页单独包裹了DataProvider，导致设置页使用的上下文与抽屉导航器内屏幕的上下文是完全独立的两个实例。修改设置页的状态只会作用于这个独立实例，返回主屏幕后，主屏幕仍使用原来的上下文实例，自然看不到更新；再次进入设置页时，新的DataProvider会重新初始化状态，导致选项重置。
2. Local State 同步失效：Options组件中用useState将上下文的initialData复制为本地状态，这只会在组件挂载时初始化一次。后续上下文状态更新时，本地状态不会自动同步，且你在回调中操作的字段与上下文定义的字段不匹配（上下文字段为third，但代码中操作niSelected）。

修复方案 #

1. 统一上下文作用域

将DataProvider提升到所有导航器的最外层，确保抽屉导航器和设置页的堆栈导航器共享同一个上下文实例：

// 入口文件（如App.js）
import { DataProvider } from './path/to/DataContext';
import RootNavigator from './path/to/RootNavigator';

export default function App() {
  return (
    <DataProvider>
      <RootNavigator />
    </DataProvider>
  );
}

同时修改设置页，移除多余的DataProvider包裹：

// Settings Screen
import { DataContext } from "../context/DataContext";
const Setting = () => {
  return (
    <View>
      <Options name="test" />
    </View>
  );
};

export default Setting;

2. 移除Local State，直接使用上下文状态

Options组件无需维护本地状态，直接依赖上下文提供的状态和更新方法：

// Options Component
import { useContext } from 'react';
import { DataContext } from "../context/DataContext";

const Options = ({ navigation }) => {
  const { initialData, updateData } = useContext(DataContext);

  const handleToggle = () => {
    // 匹配上下文定义的字段third，切换对应值
    const newValue = initialData.third === "Under 65" ? "Over 65" : "Under 65";
    updateData(newValue, "third");
  };

  return (
    <View style={{ width: "15%" }}>
      <SwitchButton
        value={initialData.third === "Over 65"}
        callback={handleToggle}
      />
    </View>
  );
};

3. （可选）添加状态持久化

如果需要重启App后保留设置，取消AsyncStorage注释，在DataContext中添加持久化逻辑：

// DataContext.js
import React, { useEffect, useState } from "react";
import AsyncStorage from '@react-native-community/async-storage';

export const DataContext = React.createContext();
const initialDataSet = {
  first: 0,
  second: false,
  third: "Under 65",
  fourth: "",
};

export const DataProvider = ({ children }) => {
  const [initialData, setInitialData] = useState(initialDataSet);

  // 挂载时读取本地存储
  useEffect(() => {
    const loadData = async () => {
      const saved = await AsyncStorage.getItem('appSettings');
      saved && setInitialData(JSON.parse(saved));
    };
    loadData();
  }, []);

  // 状态更新时保存到本地
  useEffect(() => {
    AsyncStorage.setItem('appSettings', JSON.stringify(initialData));
  }, [initialData]);

  const updateData = (newData, name) => {
    setInitialData(prev => ({ ...prev, [name]: newData }));
  };

  return (
    <DataContext.Provider value={{ initialData, updateData }}>
      {children}
    </DataContext.Provider>
  );
};

验证效果 #

• 修改设置后返回主屏幕，主屏幕可获取到更新后的状态
• 再次进入设置页，选项会保留上次修改的值
• 提交主屏幕表单时，能根据设置值正确计算输入框数值

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