React状态更新异常：传入函数的洞号未作为对象键生效

在JavaScript对象字面量中，直接写holeNumber作为键名时，会被解析为字符串"holeNumber"，而不是变量holeNumber的值。这是因为普通对象字面量的键名默认是标识符字符串，若要使用变量的值作为键名，必须使用计算属性名（用方括号[]包裹变量）。

修改handleScore函数，使用计算属性名来引用洞号变量，同时建议使用函数式更新（依赖前一个状态）来确保状态更新的准确性，避免闭包导致的旧状态问题：

const handleScore = (parNumber, holeNumber) => {
  Setscores(prevScores => ({
    ...prevScores,
    [holeNumber]: {
      // 保留当前洞已有的score值（如果存在），仅更新par
      ...prevScores[holeNumber],
      par: parNumber
    }
  }));
};

• 输入框的type="int"是无效的HTML属性，应改为type="number"，这样可以限制用户输入数字，同时获取值时更可靠。
• 如果需要更新score值，可以类似地扩展函数，比如新增参数区分更新par还是score，或者拆分两个处理函数。

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