React use setField模式下如何使用动态值作为状态更新的对象键

你需要使用ES6的计算属性名语法实现动态键，同时修正状态更新的不可变写法，具体修改如下：

核心修改点 #

1. 动态键实现：将硬编码的attribute键替换为[props.attribute]，方括号内的表达式结果会作为最终的对象键名。
2. 修正状态不可变更新：不要直接修改原fields对象的属性，避免React无法检测状态变更导致视图不更新。
3. 修正setFields传参结构：原写法会把整个旧fields对象嵌套到新状态的fields属性下，不符合表单状态的预期结构。

修正后的onChange代码 #

onChange={e => {
  // 先复制对应属性的旧值，避免直接修改原状态
  const updatedAttrValue = { ...fields[props.attribute] };
  updatedAttrValue[language] = e.target.value;
  // 用计算属性名动态指定要更新的键，展开旧状态实现不可变更新
  setFields({
    ...fields,
    [props.attribute]: updatedAttrValue
  });
}}

额外类型优化建议（可选） #

如果要提升类型安全性，可以将组件改为泛型组件，约束attribute为表单状态的合法键：

type Props<T extends Record<string, any>> = {
  formState: [T, React.Dispatch<React.SetStateAction<T>>];
  id: string;
  attribute: keyof T;
  languages: string[];
  value: TranslatableString;
};

// 组件声明改为泛型
const TranslatableFieldInput = <T extends Record<string, any>>(props: Props<T>) => {
  // 组件其余逻辑保持不变
}

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