React Native中跨屏幕更新Context状态变量并触发重渲染的方法

你的代码里存在几个关键问题，导致数组变化时无法正确触发重渲染或引发其他问题，下面是问题分析和修正方案：

问题分析 #

1. Discover组件无限重渲染：直接在组件函数体中调用setArray，会导致组件每次渲染时都触发状态更新，进而再次触发渲染，陷入无限循环。
2. FlatList渲染逻辑错误：renderItem接收的是包含item属性的对象，直接使用item会渲染出整个对象而非数组元素。
3. （你已做对，但需强调）数组更新的不可变性：必须通过创建新数组更新状态，不能直接修改原数组，否则React无法检测到状态变化，不会触发重渲染。你用[...currentArray, 'test']的方式是正确的，需保持。
4. 导航结构缺失：原App.js中缺少Tab.Navigator包裹Tab.Screen，会导致导航无法正常工作。

修正后的代码 #

AUTHCONTEXT.JS（无需修改，保持原逻辑）

import { createContext, useState } from 'react';

const AuthContext = createContext()

const AuthProvider = ({ children }) => {
  const [array, setArray] = useState([]);

  return (
    <AuthContext.Provider value={{ array, setArray }}>
      {children}
    </AuthContext.Provider>
  )
}

export {AuthContext, AuthProvider}

HOME.JS（修正FlatList渲染逻辑）

import { View, FlatList, Text } from 'react-native';
import { useContext } from 'react';
import { AuthContext } from './AuthContext';

export default Home = () => {
  const { array } = useContext(AuthContext);

  return (
    <View>
      <FlatList 
        data={array}
        keyExtractor={(item, index) => index.toString()} // 添加唯一key，避免警告
        renderItem={({ item }) => ( // 正确解构数组元素
          <Text>{item}</Text>
        )}
      />
    </View>
  )
}

DISCOVER.JS（将状态更新放到事件处理中）

import { View, Button } from 'react-native';
import { useContext } from 'react';
import { AuthContext } from './AuthContext';

export default Discover = () => {
  const { setArray } = useContext(AuthContext);

  // 点击按钮时执行数组更新
  const addNewItem = () => {
    setArray(currentArray => [...currentArray, 'test']);
  };

  return (
    <View>
      <Button title="添加元素" onPress={addNewItem} />
    </View>
  );
}

APP.JS（补全导航结构）

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './Home';
import Discover from './Discover';
import { AuthProvider } from './AuthContext';

const App = () => {
  const Tab = createBottomTabNavigator();

  return(
    <NavigationContainer>
      <Tab.Navigator> {/* 必须用Navigator包裹Screen */}
        <Tab.Screen name="HomeScreen" component={Home} />
        <Tab.Screen name="DiscoverScreen" component={Discover} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default function AppWrapper() {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
}

关键注意事项 #

• 状态更新时机：状态更新函数（如setArray）只能在事件处理函数、useEffect钩子等时机调用，不能直接放在组件函数体顶层，否则会引发无限重渲染。
• 不可变更新原则：对于数组、对象这类引用类型的状态，必须通过创建新引用（展开运算符...、Array.concat()、Array.map()等）更新，不能直接修改原对象/数组。
• FlatList的keyExtractor：建议始终为FlatList添加keyExtractor，为每个列表项提供唯一标识，避免React渲染警告。

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