React Select动态渲染字段时如何正确设置type值？

你的问题出在Select组件触发onChange时传递的是整个选项对象，而非单独的value字段，导致handleTypeChange里把完整对象赋值给了type。只需修改处理函数，提取选项对象中的value属性即可：

修改后的类型变更处理函数 #

const handleTypeChange = (index, value) => {
  const updatedFields = [...actions];
  // 提取选项对象的value属性赋值给type
  updatedFields[index].type = value.value;
  setActions(updatedFields);
}

额外优化建议 #

为了避免类型模糊问题，建议给actions数组添加明确的类型定义（以TypeScript为例），替代any类型：

// 定义单个Action项的类型
interface ActionItem {
  type: string;
  label: string;
  data: string;
}

// 初始化state时指定类型
const [actions, setActions] = useState<ActionItem[]>([{
  type: add_actions_options[0].value,
  label: "",
  data: ""
}]);

修改后，选择下拉选项时type字段就会正确存储选项的value值，输出格式与预期一致：

0: {type: 'val2' , label : 'qwe' , data:'ujm'}

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