React应用中仅日期和价格更新，标题不更新的问题排查

问题复现 #

学习React有状态列表章节时，添加新支出项出现以下异常：

• 新添加的支出项仅日期和价格字段更新，标题字段不生效
• 重复添加时，列表中所有新增项均为最后一次输入的内容

核心原因 #

这类问题基本都是状态引用复用/直接修改原状态对象导致的：
React对状态的更新检测采用浅比较逻辑，如果状态是对象、数组这类引用类型，直接修改原对象或复用同一个对象引用，React会判定状态未发生变化，不会触发重新渲染；即便触发渲染，列表中的项因指向同一个对象引用，会同步更新为最后一次修改的值。

针对性修复方案 #

1. 表单状态更新必须创建新对象 #

处理表单输入时，禁止直接修改原表单状态对象，需通过展开运算符生成新对象：

// 错误写法（直接修改原对象）
const handleInputChange = (e) => {
  formData[e.target.name] = e.target.value;
  setFormData(formData);
};

// 正确写法（创建新对象）
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData(prevForm => ({ ...prevForm, [name]: value }));
};

2. 添加新项时生成独立的对象引用 #

提交表单时，基于表单数据创建全新的支出对象，避免直接复用表单状态的对象：

const handleExpenseSubmit = (e) => {
  e.preventDefault();
  // 生成全新的支出对象，确保引用独立
  const newExpense = {
    id: Math.random().toString(), // 建议使用uuid等更可靠的唯一ID生成方式
    title: formData.title,
    amount: Number(formData.amount),
    date: new Date(formData.date)
  };
  // 用函数式更新创建新数组，确保拿到最新状态
  setExpenses(prevExpenses => [...prevExpenses, newExpense]);
  // 重置表单状态
  setFormData({ title: '', amount: '', date: '' });
};

3. 禁止直接修改原数组状态 #

更新支出列表时，绝对不能直接对原数组执行push/shift等操作，必须返回新数组：

// 错误写法（直接修改原数组）
expenses.push(newExpense);
setExpenses(expenses);

// 正确写法（创建新数组）
setExpenses(prev => [...prev, newExpense]);

验证修复逻辑 #

完成上述修改后，每次添加新支出项时：

• 表单状态会以新对象的方式更新，避免引用污染
• 新支出项是独立的对象，不会和其他项共享引用
• 列表状态通过新数组触发React重新渲染，所有字段都会正确显示

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