reactjs - 在反应中，下拉元素有时不会出现

Question

我曾经问过一个与这个项目有关的问题，现在我遇到了另一种情况。

我正在使用 multiselect-react-dropdown 制作一个下拉菜单，该下拉菜单必须采用它应该显示的主题的 _id，并将其传递给 Express API。

它工作正常，问题是它没有显示带有名称的选项，只显示它们的 _id，这就是这段代码所调用的：

async function listActiveSubjectsById() {
     const response = await api.get("/subject");
     const ids = response.data.subjects.map(({ _id }) => _id);
     return ids;
}

我需要它来显示主题名称，但只将它的 ID 传递给 API。一个朋友帮了我，它奏效了。结果就是这样写的。

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Multiselect } from 'multiselect-react-dropdown';


const TeacherClassInfo = props => {
    const [subjects, setSubjects] = useState();
    const [subjectName, setSubjectName] = useState();

    let selectedSubject = [];

    const onSelect = async (selectedList, selectedItem) => {
        let index = await subjectName.indexOf(selectedItem, 0);
        const getSubjects = await listActiveSubjectsById();
        let subjectsDict =[];
        getSubjects.forEach((value) => {
            subjectsDict.push(value);
        });
        selectedSubject.push(subjectsDict[index]);
    }

    const handleListActiveSubjects = async () => {
        setSubjects(subjectName);
    }

    const handleListActiveSubjectsName = async () => {
        const getSubjectsName = await listActiveSubjectsByName();
        setSubjectName(getSubjectsName);
    }

    useEffect((subjectName) => {
        handleListActiveSubjects();
        handleListActiveSubjectsName();
    }, []);

    return (
        <>
            <Multiselect
                options={subjects}
                isObject={false}
                onSelect={onSelect}
                onRemove={onRemove}
                placeholder={"Quais matérias você leciona? *"}
            />

通过此方法调用主题名称：

async function listActiveSubjectsByName() {
    const response = await api.get("/materia");
    const names = response.data.subjects.map(({ name }) => name);
    return names;
}

问题是有时选项显示，有时不显示，如图所示：

而且我不确定是什么导致了它，但我认为它与 useEffect() 有关，我希望在识别和纠正这个问题方面得到一些帮助，以便它始终显示出来。

非常感谢您的宝贵时间。

标签： reactjsapidropdown