如何在onChange时更新对象数组类型的React状态？

首先明确你的状态结构：每个数组元素是{ name: string; budget: number | null }，每个动态渲染的TextField对应数组中的一个元素，通过name属性关联到item的name字段，需要更新对应item的budget值。

错误原因分析 #

你的原handleChange存在两个核心问题：

1. 多嵌套了一层箭头函数：(event) => () => {}，这会让onChange触发时仅返回一个函数，而非直接执行状态更新逻辑。
2. 使用Object.entries(item).map后未转换回对象：该方法返回的是二维键值对数组，而非原状态要求的对象类型，导致类型不匹配报错。

正确的实现代码 #

1. 修正后的handleChange函数

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  // 把输入的字符串转为数字，空值则设为null
  const inputValue = event.target.value ? Number(event.target.value) : null;
  // 过滤非法数字（比如输入非数字字符）
  const budgetValue = isNaN(inputValue) ? null : inputValue;

  setBudget(prevBudget => {
    if (!prevBudget) return []; // 处理初始状态为undefined的情况
    return prevBudget.map(item => {
      // 找到name匹配输入框name的item，更新其budget
      if (item.name === event.target.name) {
        return { ...item, budget: budgetValue };
      }
      // 其他item保持不变
      return item;
    });
  });
};

2. 动态渲染TextField的优化代码

原渲染代码可直接返回map结果，无需手动push到content数组：

const content = budget?.map((item) => (
  <TextField
    key={item.name} // 必须添加唯一key，满足React列表渲染要求
    name={item.name}
    id={item.name}
    label={item.name}
    type="tel"
    onChange={handleChange}
    // 回显当前budget值，空值显示空字符串
    value={item.budget ?? ''}
  />
)) || [];

关键说明 #

• 使用函数式更新setBudget(prevBudget => ...)：确保获取到最新的状态值，避免闭包导致的旧状态问题。
• 类型转换与校验：把输入的字符串转为number类型，并处理空值、非法数字的情况，保证符合budget: number | null的类型要求。
• 添加唯一key：动态渲染列表时必须给每个组件添加唯一key，避免React渲染异常。

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