TypeScript/React中如何用变量名作为对象引用赋值？

错误原因 #

1. 你的GenerationInterface接口中包含number类型的属性（id、max_power、current_power），但输入框返回的event.target.value是string类型，直接赋值会触发类型不兼容错误。
2. 直接修改currentGeneration的引用违反React状态不可变性原则，组件无法正确触发重渲染。

方案一：统一接口属性为字符串类型 #

如果确实要将所有接口属性存为字符串，先调整接口定义：

export default interface GenerationInterface{
  id?: string;
  name?: string;
  latitude?: string;
  longitude?: string;
  source?: string;
  max_power?: string;
  current_power?: string;
}

然后修改表单变更处理函数，创建状态副本并赋值：

const handleGenerationFormChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  // 创建原状态的浅拷贝，避免直接修改原对象
  const genHolder = { ...currentGeneration };
  const key = event.target.name as keyof GenerationInterface;
  
  // 类型断言确保赋值类型匹配
  genHolder[key] = event.target.value as GenerationInterface[keyof GenerationInterface];
  
  // 更新React状态（假设你用useState声明了setCurrentGeneration）
  setCurrentGeneration(genHolder);
};

方案二：保留原接口类型，做类型转换 #

如果需要保留number类型属性，可根据属性名对输入值做类型转换：

const handleGenerationFormChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  const genHolder = { ...currentGeneration };
  const key = event.target.name as keyof GenerationInterface;
  const inputValue = event.target.value;

  // 根据属性类型转换输入值
  switch (key) {
    case 'id':
    case 'max_power':
    case 'current_power':
      // 空值时设为undefined，非空则转为数字
      genHolder[key] = inputValue ? Number(inputValue) : undefined;
      break;
    default:
      // 字符串类型属性直接赋值
      genHolder[key] = inputValue;
      break;
  }

  setCurrentGeneration(genHolder);
};

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