时间戳

首页 > 解决方案 > React - 使用 .map() 时处理空数组

javascript - React - 使用 .map() 时处理空数组

问题描述

我在 react 和 javaScript 方面几乎没有经验，并且难以呈现最初为空的列表 该列表应该是一个搜索结果列表，将在单击搜索后呈现给用户，但该列表没有显示，因为它是空的并且获取搜索结果后不显示。

export default function PesquisarDisc() {
  const [disciplinas, setDisciplinas] = useState([]);
  const [resPesquisa, setResPesquisa] = useState([]);

  const user = useSelector((state) => state.user.profile);

  async function carregarDisciplinas() {
    const response = await api.get('disciplinas');

    return response.data;
  }

  function handleSubmit({ anoLetivo1, curso1, unidadeCurricular1 }) {
    carregarDisciplinas().then((value) => {
      setDisciplinas(value);
    });

    disciplinas.forEach((disciplina) => {
      if (
        disciplina.professor_id === user.id &&
        disciplina.anoLetivo === anoLetivo1 &&
        disciplina.curso === curso1 &&
        disciplina.nome === unidadeCurricular1
      ) {
        setResPesquisa(disciplina);
      }
    });
  }

  return (
    <Container>
      <div className="title">Pesquisar disciplinas</div>
      <Form onSubmit={handleSubmit}>
        <span>Ano Letivo:</span>
        <Input
          name="anoLetivo1"
          type="text"
          placeholder="Introduza o ano letivo"
        />
        <span>Unidade Curricular:</span>
        <Input
          name="unidadeCurricular1"
          type="text"
          placeholder="Introduza a unidade curricular"
        />
        <span>Curso:</span>
        <Input name="curso1" type="text" placeholder="Introduza o curso" />

        <hr />

        <button type="submit">Pesquisar</button>
      </Form>

      <List>
        {resPesquisa.map((resultado) => (
          <li key={resultado.nome}>
            <span>{resultado.nome}</span>
            <a href="/">Lançar sumário</a>
          </li>
        ))}
      </List>
    </Container>
  );
}

标签： javascriptreactjsdictionary

解决方案

将循环移动到then范围，否则没有用最新值定义学科（你在结果解析之前循环），也使用value而不是学科，或者使用回调setDisciplinas

function handleSubmit({ anoLetivo1, curso1, unidadeCurricular1 }) {
    carregarDisciplinas().then((value) => {
      setDisciplinas(value);

      setResPesquisa(value.filter((disciplina) => disciplina.professor_id === user.id && disciplina.anoLetivo === anoLetivo1 &&
          disciplina.curso === curso1 &&
          disciplina.nome === unidadeCurricular1
      ));
    });
  }

编辑：看看我注意到你的 resPesquisa 被用作数组的评论，所以也许过滤它会更好

推荐阅读