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

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

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

应用程序.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>
  );
}