reactjs - React - 如何使用 map 在 unform select 类型的输入上传递一组选项

问题描述

我有一个选择输入，我想使用 map 传递一个选项数组对象，但是在渲染我的页面时只有一个选项，即使我在地图中使用的数组有几个项目，它坚持只显示一个

在所有代码下方：



export default function PesquisarAulas() {
  const dispatch = useDispatch();

  const user = useSelector((state) => state.user.profile);
  const [docente, setDocente] = useState([]);
  const [docenteDisciplinas, setDocenteDisciplinas] = useState([]);
  const [disciplinas, setDisciplinas] = useState([]);
  const updateDisciplinas = [...disciplinas];

  

  async function carregarDocente() {
    const response = await api.get(`docente/findByUser/${user.id}`);

    return response.data;
  }

  async function carregarDisciplinasDocente() {
    const response = await api.get(`docente/${docente.id}/disciplinas`);

    return response.data;
  }

  async function carregarDisciplina(disc) {
    const response = await api.get(`disciplinas/${disc.id_disciplina}`);

    return response.data;
  }

  useEffect(() => {
    carregarDocente().then((value) => {
      setDocente(value);
    });
  }, [user]);

  useEffect(() => {
    carregarDisciplinasDocente().then((value) => {
      setDocenteDisciplinas(value);
    });
  }, [docente]);

  useEffect(() => {
    docenteDisciplinas.map((docDisc) =>
      carregarDisciplina(docDisc).then((value) => {
        updateDisciplinas.push(value);
        setDisciplinas(updateDisciplinas);
      })
    );
  }, [docenteDisciplinas]);

  console.log(disciplinas);
 

  function handleSubmit() {}

  return (
    <Container>
      <div className="title">Pesquisar aulas</div>
      <Form onSubmit={handleSubmit}>
        <div className="input-box">
          <span>Ano Letivo:</span>
          <Input
            name="anoLetivo1"
            type="text"
            placeholder="Introduza o ano letivo"
          />
        </div>

        <div className="input-box">
          <span>Disciplinas:</span>
          <Select
            name="tech"
            options={disciplinas.map((disciplina) => ({
              id: disciplina.id,
              title: disciplina.nome,
            }))}
            placeholder="Nenhum selecionado"
          />
        </div>

        <div className="input-box">
          <span>Aulas de:</span>
          <Input name="dataInicio1" type="datetime-local" id="pickup_time" />
          <span style={{ marginLeft: '10px' }}>ate:</span>
          <Input name="dataFinal1" type="datetime-local" id="pickup_time" />
        </div>

        <div className="input-box">
          <span>Curso:</span>
          <Input name="curso1" type="text" placeholder="Introduza o curso" />
        </div>

        <div className="input-box">
          <span>Unidade Curricular:</span>
          <Input
            name="unidadeCurricular1"
            type="text"
            placeholder="Introduza a unidade curricular"
          />
        </div>

        <hr />

        <button type="submit">Pesquisar</button>
      </Form>
     
    </Container>
  );
}

问题的重点在于这两个代码片段：

const [disciplinas, setDisciplinas] = useState([]);
  const updateDisciplinas = [...disciplinas];


useEffect(() => {
    docenteDisciplinas.map((docDisc) =>
      carregarDisciplina(docDisc).then((value) => {
        updateDisciplinas.push(value);
        setDisciplinas(updateDisciplinas);
      })
    );
  }, [docenteDisciplinas]);


  <Select
            name="tech"
            options={disciplinas.map((disciplina) => ({
              id: disciplina.id,
              title: disciplina.nome,
            }))}
            placeholder="Nenhum selecionado"
          />

我认为问题在于，当呈现选择时，只有一个项目被插入到学科数组中，我想也许有办法让 Select 等到学科数组中的所有项目都准备好以便它可以呈现时，问题将得到解决。

标签： reactjsdictionaryselectinputunform

reactjs - React - 如何使用 map 在 unform select 类型的输入上传递一组选项

问题描述

解决方案

推荐阅读