Javascript ：聚焦 ? "000000" ：null， 颜色：禁用 ? “#ccc” ：我当选 ? "000000" > 2 ? “白色” ：“黑色” : "000000", 光标：是否禁用？“不允许”：“默认值”， “：活动”：{ …样式[“：活动”]， 背景颜色：

：聚焦 ? "000000" ：null， 颜色：禁用 ? “#ccc” ：我当选 ? "000000" > 2 ? “白色” ：“黑色” : "000000", 光标：是否禁用？“不允许”：“默认值”， “：活动”：{ …样式[“：活动”]， 背景颜色：！isDisabled&（isSelected？“000000”：“000000”） }, 边界半径：“10px” }; }, 占位符：（样式）=>（{…样式，…点（）}）， 多值：（样式，{data}）=>({ …风格， …点（数据.颜色）， 边界半径：“40px” }), 多值标签：（样式）=>({ …风格， 颜色：#061655“， 重量：500 }), 多值删除：（样式，{data}）=>({ …风格， 颜色：#061655“， 填充：“8px 8px 8px 4px”， “：悬停”：{ 背景色：“透明”， 颜色：#061655“， 光标：“指针”， 边界半径：“0px 40px 40px 0px” } }) }; const FormAddProfessional=（道具）=>{ 常量[selectedSpeciality，setSelectedSpeciality]=useState（null）； 常量选项专业=[ { id:1， 小时:0， 分钟:0,， 注册人数：“， 价值：“ac.terapeutico”， 标签：“Ac.Terapéutico” }, { id:2， 小时:0， 分钟:0,， 注册人数：“， 价值：“动觉学”， 标签：“Kinesiología” }, { id:3， 小时:0， 分钟:0,， 注册人数：“， 值：“Onologia”， 标签：“OnClogía” } ]; 常量handleChangeEnrollment=（值，id）=>{ 让index=selectedSpeciality.findIndex（（el）=>el.id==id）； 常量数据=[…selectedSpeciality]； 数据[索引]。注册=值； 设置所选专业（数据）； }; 返回( “没有选择”} /> {所选专业&& selectedSpeciality.map（（el）=>( handleChangeEnrollment（如target.value、el.id） } label={'MATRÍCULA${el.label.toUpperCase（）}`} /> ))} {console.log（selectedSpeciality）} ); }; 导出默认的FormadProfessional；

---

你考虑过使用吗？@Tejogol我不确定是否必须使用debounce。它们是简单的文本fields@ChristianFritzel.enrollment在选项数组中定义，它们是选择项显示的选项。由于它是一个多选择器，因此对于所选的每个选项，数组的整个元素都保存在selectedSpeciality中。最后，我制作了一个map函数，它生成一个文本字段，这个文本字段具有函数handlechangerenchroll，它更新注册的值这里没有显示很多内容：尤其是TextField组件。这是我首先要查找延误原因的地方。如果您能够创建问题的副本（可能是在Stackblitz上），这将更容易为您提供帮助。您能提到用于代码的前端库吗？因为我将您的代码迁移到默认的HTML组件，它工作得很好。谢谢！你的回答让我明白了

const options = [
  { id: 1, hour: 0, minute: 0, enrollment: '', value: 'ac.terapeutico', label: 'Ac. Terapéutico', color: getRandomColor() },
  { id: 2, hour: 0, minute: 0, enrollment: '', value: 'kinesiologia', label: 'Kinesiología', color: getRandomColor() },
  { id: 3, hour: 0, minute: 0, enrollment: '', value: 'oncologia', label: 'Oncología', color: getRandomColor() }
];

const Form = () => {
  const [selectedSpeciality, setSelectedSpeciality] = useState(null);
  const handleChangeEnrollment = (value, id) => {
    let index = selectedSpeciality.findIndex(el => el.id === id);
    const data = [...selectedSpeciality];
    data[index].enrollment = value;
    setSelectedSpeciality(data);
  }
  return (
    <Grid container spacing={2}>
      <Grid item xs={12}>
        <Select
          closeMenuOnSelect={true}
          isMulti
          options={options}
          styles={colourStyles}
          value={selectedSpeciality}
          onChange={setSelectedSpeciality}
          placeholder='Seleccione especialidades'
          noOptionsMessage={() => "No hay más opciones"}
        />
      </Grid>
      {selectedSpeciality &&
        selectedSpeciality.map(el => (
          <Fragment key={uuid()}>
            <Grid item xs={6}>
              <TextField
                fullWidth
                InputLabelProps={{
                  shrink: true,
                }}
                value={el.enrollment}
                onChange={(e) => handleChangeEnrollment(e.target.value, el.id)}
                label={`MATRÍCULA ${el.label.toUpperCase()}`}
              />
            </Grid>
          </Fragment>
        ))
      }
      {console.log(selectedSpeciality)}
    </Grid>
  );
}