ReactStars组件无法更新useState：TypeError读取'name'属性未定义

问题出在react-rating-stars-component的onChange回调逻辑和普通input不同：它直接返回选中的星级数值（比如1-5的整数），而非标准的Event对象。你原来的handleChangeInput函数依赖event.target.name来定位字段，自然会抛出Cannot read properties of undefined (reading 'name')错误。

下面提供两种可行的修复方案：

方案一：重构handleChangeInput，直接传递字段名和值（推荐） #

这种方式更直观，避免依赖事件对象，同时兼容两种输入组件：

1. 修改handleChangeInput函数，改为接收index、fieldName和value三个参数：

const handleChangeInput = (index, fieldName, value) => {
  const values = [...inputField];
  // 针对stars字段，确保值为整数类型
  values[index][fieldName] = fieldName === 'stars' ? Number(value) : value;
  setInputField(values);
  setData(values);
};

2. 分别修改两个输入组件的onChange回调：

• 普通skill输入框：传递字段名'skill'和输入值

<Form.Control
  className="mb-3"
  type="text"
  id="skill"
  name="skill"
  value={inputField?.skill}
  onChange={(event) => handleChangeInput(index, 'skill', event.target.value)}
/>

• ReactStars组件：传递字段名'stars'和返回的星级值

<ReactStars
  type="number"
  name="stars"
  count={5}
  size={24}
  id="stars"
  onChange={(value) => handleChangeInput(index, 'stars', value)}
  color="rgba(230, 230, 230, 255)"
  emptyIcon={<i className="fa-solid fa-star"></i>}
  filledIcon={<i className="fa-solid fa-star"></i>}
  value={inputField.stars}
/>

方案二：构造假事件对象兼容原有函数 #

如果你不想修改handleChangeInput的结构，可以在ReactStars的回调里手动构造一个符合原有逻辑的"假事件对象"：

<ReactStars
  // 其他属性不变
  onChange={(value) => handleChangeInput(index, { target: { name: 'stars', value } })}
/>

这样传入的参数会被handleChangeInput识别为带有target.name和target.value的对象，不会报错。

两种方案都能解决问题，推荐方案一，因为代码更清晰、更易于维护，避免了构造虚拟事件对象的冗余逻辑。

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