React Native Context 不会跨文件和屏幕更新

Question

我正在尝试使用 Context 创建一个跨屏幕存在的全局数组。我的设置包括一个显示数组内容的屏幕，以及一个到第二个屏幕的导航按钮，其中包含一个用于将元素添加到列表的按钮。

我希望第一页的列表在每次按下添加按钮时打印一个额外的“Hello World”，并显示一个初始项目“Hello World Initial”。但是，使用下面的代码，我只能显示初始值，并且尝试添加更多内容失败了。

没有抛出任何错误，按下按钮似乎没有做任何事情。这是项目的小菜一碟：https://snack.expo.dev/@figbar/context-across-files-and-screens，下面是其中包含的代码：

App.js：

import { TestList, TestListProvider } from './File1';
import * as React from 'react';
import {View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Screen2 from './Screen2';


const Stack = createStackNavigator();


function HomeScreen({ navigation }) {
   const _retrievedList = React.useContext(TestList);
  const populate = (arg:any) => {
    return arg.map((val, index) => <Text key={index}>{val.value}</Text>);
  }
  return (
    <View>
        <View>{populate(_retrievedList)}</View>
        <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Screen2')}
      />
    </View>
    
  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

文件1.js

import React from 'react'

const testObject = {
    value: "Hello World Initial",
};

export const TestList = React.createContext([testObject]);

export const TestListProvider = TestList.Provider;

Screen2.js

import { TestList, TestListProvider } from './File1';
import * as React from 'react';
import {View, Text, Button } from 'react-native';


export default function Screen2() {

  const testObject2 = {
      value: "Hello World",
  }
  const [_localUpdate, _setLocalUpdate] = React.useState([]);
  
  const addItem = () => {
    _setLocalUpdate([..._localUpdate, testObject2]);
  }
  return (
    <View>
        <TestListProvider value={_localUpdate}>
          <Button onPress={addItem} title="Add" color="#841584" />
        </TestListProvider>
    </View>
  );
}

Answer 1

您的上下文提供者必须包装所有将使用上下文值的组件。在此示例中，只有一个 Button 可以使用上下文 - 您自己的组件都不能。

您需要将提供者连同承载其价值的状态一起移动到您的根组件。