React组件状态变更未触发重渲染问题求助

核心问题是Context的Reducer未正确生成新状态，导致组件状态更新逻辑异常，进而让你误以为点击Save按钮时的本地状态切换未触发重渲染：

1. Reducer修改原数组，未触发Context更新 #

在BudgetContext.js的reducer函数中，处理"changed"类型的action时，直接修改了原state数组并返回原引用：

case "changed":
  const index = state.findIndex(e => e.id === action.expense.id);
  state[index] = action.expense;
  return state; // 错误：返回原数组，React无法检测状态变化

React依赖状态的引用变化触发重渲染，返回同一个数组会导致useExpenses无法感知状态更新，引发两个问题：

• 输入框的受控值无法同步用户输入内容
• ExpenseList组件不会重新渲染，干扰Expense组件的本地状态逻辑

修复方案：处理"changed"时返回新数组，替换目标元素：

case "changed":
  return state.map(exp => 
    exp.id === action.expense.id ? action.expense : exp
  );

2. 本地状态逻辑验证 #

Expense组件的isEditing状态切换逻辑本身是正确的：Edit按钮设置isEditing为true，Save按钮设置为false。修复Reducer后，点击Save按钮的setIsEditing(false)会正常触发组件重渲染，切换到非编辑界面。

你之前觉得点击Save没反应，本质是Reducer问题导致输入框内容无法更新，加上Context状态未更新引发的混淆，并非本地状态切换未生效。

修复Reducer后，输入框内容会同步更新，点击Save按钮也会正确切换到展示界面。

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