React Native数组型Context无法更新值问题求助

核心问题1：直接修改原State数组（违反React状态不可变原则） #

你在updateNotifications里用notifications.push(n)直接修改了原状态数组，React无法检测到这种引用未发生变化的修改，因此不会触发组件重渲染和Context更新。必须创建新数组来更新状态。

核心问题2：setState异步性与useEffect依赖缺失 #

调用updateNotifications后立刻console.log看不到更新，因为React的setState是异步操作；同时你的useEffect依赖为空数组，只会执行一次，内部捕获的context是初始值，后续Context更新也不会触发这个useEffect重新执行。

核心问题3：useCallback依赖与函数式更新缺失 #

当前useCallback的依赖数组为空，但updateNotifications依赖notifications，这会导致闭包捕获旧的notifications值。改用函数式更新可以避免这个问题，同时确保拿到最新的状态。

修正后的Context代码 #

import React, { useState, useCallback } from 'react';

export const NotificationContext = React.createContext({
  notifications: [],
  updateNotifications: () => {},
});

export default function NotificationContextProvider({ children }) {
  const [notifications, setNotifications] = useState([]);

  // 使用函数式更新，确保拿到最新state，同时遵循不可变原则
  const updateNotifications = useCallback((newItem) => {
    // 若添加单个元素，用扩展运算符创建新数组
    setNotifications(prevNotifications => [...prevNotifications, newItem]);
    // 若替换整个数组，直接传新数组：setNotifications(newItem);
    // 根据需求二选一
  }, []);

  const contextValue = {
    notifications,
    updateNotifications,
  };

  return (
    <NotificationContext.Provider value={contextValue}>
      {children}
    </NotificationContext.Provider>
  );
}

修正后的调用代码 #

import { useContext, useEffect } from 'react';
import { NotificationContext } from './NotificationContext';

function YourComponent() {
  const { notifications, updateNotifications } = useContext(NotificationContext);

  useEffect(() => {
    (async () => {
      console.log('初始通知:', notifications);
      // 添加单个元素（替换数组则直接传完整数组）
      updateNotifications(1);
    })();
  }, []);

  // 监听notifications变化，查看更新后的值
  useEffect(() => {
    console.log('通知更新后:', notifications);
  }, [notifications]);

  return <div>{/* 组件内容 */}</div>;
}

关键说明 #

• 状态不可变：永远不要直接修改state对象/数组，必须通过创建新引用（如[...prevArr, newItem]）来更新。
• 函数式更新：当新状态依赖旧状态时，使用setState(prevState => newState)可避免闭包导致的旧值问题。
• useEffect依赖：若需监听状态变化，必须将对应状态加入依赖数组。

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