React使用.map()处理初始空数组时搜索结果无法正常渲染问题

• 异步逻辑执行顺序错误：carregarDisciplinas 是异步接口请求，你在调用它之后立刻遍历disciplinas数组，此时请求还未返回结果，setDisciplinas也未执行，遍历的始终是初始空数组。同时React的状态更新是异步的，就算请求立刻返回，执行setDisciplinas后当前作用域拿到的disciplinas依然是更新前的旧值，无法获取到最新数据。
• 状态类型不匹配：resPesquisa初始声明为数组，但你的筛选逻辑中是把单个对象赋值给它，后续执行map遍历时会抛出类型错误，导致无法正常渲染。

直接修改handleSubmit逻辑，把筛选操作放到异步请求的回调中，同时调整筛选逻辑保证返回数组类型：

function handleSubmit({ anoLetivo1, curso1, unidadeCurricular1 }) {
  carregarDisciplinas().then((value) => {
    // 直接使用接口返回的最新数据做筛选
    const resultadoFiltrado = value.filter((disciplina) => {
      return disciplina.professor_id === user.id &&
        disciplina.anoLetivo === anoLetivo1 &&
        disciplina.curso === curso1 &&
        disciplina.nome === unidadeCurricular1
    })
    // 将筛选后的数组赋值给结果状态
    setResPesquisa(resultadoFiltrado)
  })
}

如果没有其他场景需要用到全量的disciplinas数据，对应的disciplinas状态可以直接删除，减少不必要的状态更新。

你还可以补充空结果提示，优化交互体验：

<List>
  {resPesquisa.length > 0 ? (
    resPesquisa.map((resultado) => (
      <li key={resultado.nome}>
        <span>{resultado.nome}</span>
        <a href="/">Lançar sumário</a>
      </li>
    ))
  ) : (
    <li>暂无匹配的搜索结果</li>
  )}
</List>

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