React使用useState修改表格渲染的数组值不生效如何解决？

问题原因 #

• 变量名不匹配：你定义的状态是awayAbilityAdjust，但更新函数里操作的是完全不相关的homeAbilityAdjust，修改后的值根本没关联到渲染用的数组
• 状态修改逻辑错误：你复制了新数组updatedArray，但却直接修改了原状态数组的对应下标值，新复制的数组完全没被改动，调用状态更新方法传入的还是和原状态一模一样的数组，React检测不到状态变化就不会触发重渲染
• 类型不匹配：表单number类型输入框返回的e.target.value是字符串类型，和初始状态的数字类型不一致，后续逻辑可能出现隐式类型转换问题

正确实现代码 #

1. 统一状态变量名，修正更新逻辑

// 状态定义保持变量名统一，渲染和更新操作同一个状态
const [awayAbilityAdjust, setAwayAbilityAdjust] = useState([1, 1, 1, 1, 1]);

// 修正后的更新函数
const updateAwayAbility = (index) => (e) => {
  // 复制原数组得到新数组
  const updatedArray = [...awayAbilityAdjust];
  // 修改新数组的对应下标值，同时把输入的字符串转成数字
  updatedArray[index] = Number(e.target.value);
  // 传入修改后的新数组触发状态更新
  setAwayAbilityAdjust(updatedArray);
};

2. 修改表单的绑定逻辑

<tr>
  <td>Ability Adjust</td>
  {awayAbilityAdjust.map((ability, index) => (
    <td key={index}>                               
      <Form.Control
        size="sm"
        type="number"
        name="ability-input"
        step="0.1"
        value={ability}
        style={{
          width: "50px",
          backgroundColor: "#6d784b",
          color: "#ffff",
        }}
        min="0"
        max="10"
        // 绑定修正后的更新函数
        onChange={updateAwayAbility(index)}
      />
    </td>
  ))}
</tr>

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