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

Posted 2023-04-14

【中文标题】React Native Context 不会跨文件和屏幕更新

【英文标题】：React Native Context not updating across files and screens

【发布时间】：2021-10-05 13:36:53

【问题描述】：

我正在尝试使用 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>
  );

【参考方案1】：

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

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

【讨论】：

如果我将它们移动到根组件，那么 addItem 如何访问 _localUpdate 和 _setLocalUpdate？

@figbar _localUpdate 将存在于根目录中，子节点将使用 useContext 访问它。