React使用map为Unform Select传选项数组仅显示单条选项如何解决

你遇到的问题是由两个核心错误导致的：

• 错误的状态更新逻辑：你在组件顶层声明了const updateDisciplinas = [...disciplinas]，该变量仅会在组件每次渲染时生成一次。多个carregarDisciplina异步请求的回调函数执行时，操作的都是同一个初始数组的引用，每次push后调用setDisciplinas传入的都是同一个数组对象，React浅比较会判定状态未发生变化，跳过后续重渲染，最终只会保留第一次更新后的1条数据。
• 未批量处理异步请求：你当前是每个请求返回就触发一次状态更新，不仅会产生多次不必要的重渲染，也容易出现竞态问题。

1. 删掉组件顶层无用的const updateDisciplinas = [...disciplinas];代码
2. 修改处理docenteDisciplinas的useEffect逻辑，用Promise.all等待所有请求完成后再统一更新状态，修改后的代码如下：

useEffect(() => {
  // 空数组直接返回，避免无意义请求
  if (!docenteDisciplinas.length) return;
  // 生成所有请求的Promise数组
  const requestList = docenteDisciplinas.map(docDisc => carregarDisciplina(docDisc));
  // 等待所有请求完成后批量更新状态
  Promise.all(requestList).then(fullDisciplinaList => {
    setDisciplinas(fullDisciplinaList);
  });
}, [docenteDisciplinas]);

你当前docente状态的初始值是数组，但后续代码用了docente.id，说明接口返回的是对象格式，建议把初始值改为useState({})或者useState(null)，避免初始阶段读取id属性时报错。

如果修改后Select还是无法正常显示选项，可以检查你使用的Select组件要求的options字段是否匹配，部分组件要求显示字段为label而非title，可将options的生成逻辑改为：

options={disciplinas.map((disciplina) => ({
  id: disciplina.id,
  label: disciplina.nome,
}))}

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