React Context数组状态更新异常：删日期后状态未更且useEffect未触发

核心原因 #

React依赖引用变化检测状态更新。如果直接修改原数组/对象（比如用splice删除元素、直接修改对象属性），新状态和旧状态的引用完全相同，React会判定状态未发生变化，不会触发组件重渲染，依赖该状态的useEffect自然也不会执行。

具体解决方案 #

1. 始终创建新的数组/对象引用 #

删除日期时，绝对不能直接修改原状态数组，必须返回一个全新的数组实例：

错误写法（直接修改原数组）

// Context中的状态更新函数
const removeDate = (dateToRemove) => {
  // 直接修改原数组，引用未变
  selectedDates.splice(selectedDates.findIndex(d => d.id === dateToRemove.id), 1);
  setSelectedDates(selectedDates);
};

正确写法（创建新数组）

// 推荐：用filter生成新数组
const removeDate = (dateToRemove) => {
  setSelectedDates(prevDates => prevDates.filter(date => date.id !== dateToRemove.id));
};

// 备选：扩展运算符+slice切割数组
const removeDate = (dateToRemove) => {
  setSelectedDates(prevDates => {
    const targetIndex = prevDates.findIndex(d => d.id === dateToRemove.id);
    return [...prevDates.slice(0, targetIndex), ...prevDates.slice(targetIndex + 1)];
  });
};

2. 嵌套对象状态的更新注意事项 #

如果你的状态是包含数组的对象（比如{ selectedDates: [], otherProp: '' }），更新时要返回全新的对象，不能只修改对象内部的数组：

错误写法

const updateState = (dateToRemove) => {
  const newState = state; // 直接引用原对象
  newState.selectedDates = newState.selectedDates.filter(d => d.id !== dateToRemove.id);
  setState(newState);
};

正确写法

const updateState = (dateToRemove) => {
  setState(prevState => ({
    ...prevState, // 保留原对象的其他属性
    selectedDates: prevState.selectedDates.filter(d => d.id !== dateToRemove.id)
  }));
};

3. 检查useEffect的依赖数组 #

确保useEffect的依赖数组里包含正确的状态引用，不能遗漏或错误依赖旧值：

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

const DateComponent = () => {
  const { selectedDates } = useContext(DatesContext);

  useEffect(() => {
    console.log('选中日期已更新：', selectedDates);
    // 执行你的业务逻辑
  }, [selectedDates]); // 必须把selectedDates加入依赖数组

  // ...组件其他代码
};

验证步骤 #

• 删除操作后，打印selectedDates的引用对比结果（比如console.log(newDates === oldDates)），确认新状态和旧状态不是同一个引用
• 检查Context Provider是否正确包裹了所有使用该状态的组件
• 确认状态更新函数是通过Context传递的，而非在组件内部重复定义

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