javascript - 如何使用 api 填充选择选项

Question

这是我的代码。我收到 学生的来自支持的数据，对其进行过滤。
我不能为选择选项设置默认值，setAssignedStudent 也不能。工作，在控制台中，我得到 undefined .请让我知道如何解决这个问题。

//here is sample of students array
// let students- [  {name: "abc", email:"abc.com", mentor:"" },  
// {name: "abc", email:"abc.com", mentor:"cda" },  {name: "abc", email:"abc.com", //mentor:"" }]
useEffect(() => {
    const getStudents = async () => {
      try {
        const res = await fetch("http://localhost:3001/students");
        const data = await res.json();
        //console.log(data);
        //filtering students based on who doesn;t have mentor
        let filter = data.filter((e) => {
          return e.mentor === "";
        });
        if (filter.length > 0) setStudents(filter);
      } catch (err) {
        console.log(err);
      }
    };
    getStudents();
  }, []);
 const [assignedStudent, setAssignedStudent] = useState(students[1]);
 const handleChange = (e) => {
    setAssignedStudent(
      students.find((student) => student._id == e.target.value)
    );
    console.log(assignedStudent);
  };
 const handleSubmit = async (e) => {
    e.preventDefault();
 console.log(assignedStudent);
}

<form onSubmit={(e) => handleSubmit(e)}>
          <select onChange={handleChange} value={assignedStudent}>
            {students.map((student) => {
              return (
                <>
                  <option key={student._id} value={student.id}>
                    {student.name}
                  </option>
                </>
              );
            })}
          </select>
          <button type="submit">Submit </button>
</form>

Answer 1

问题:
您的 学生 对象在 API 调用之前为空，并且未在您的 setState 中初始化.所以使用 students.map在您的 select element 将导致错误(因为您无法映射未定义的数组)。
解决方案:
在使用 map 之前有两件重要的事情与 数组 :

检查 定义 数组的大小(数组是否已定义并存在？)

检查其长度 (数组有内容吗？)

第一的
通过简单的 if 检查其声明/定义陈述:

{
  if(myArrayOfData) {
    myArrayOfData.map(
      // rest of the codes ...
    )
  }
}

或使用 ? if 的缩写

{
  myArrayOfData?.map(
    // rest of the codes ...
  )
}

第二
检查数组的内容并使用 map检查其 后的功能长度 (它告诉您数据已经从 API 调用等到达并准备好处理)

{
  if(myArrayOfData) {
    if(myArrayOfData.length > 0) {
     myArrayOfData.map(
        // rest of the codes ...
     )
    }
  }
}

最后:
虽然上面的代码片段可以正常工作，但您可以通过检查 if 来简化它。一起条件:

{
  if(myArrayOfData?.length > 0) {
     myArrayOfData.map(
        // rest of the codes ...
     )
  }
}

可选的:
在实际示例中，您可能需要在获取数据时显示一些加载组件。

{
  if(myArrayOfData?.length > 0) {
    myArrayOfData.map(
      // rest of the codes ...
    )
  } else {
    <Loading />
  }
}

意识到

const anEmptyArray  = []

if(anEmptyArray){
  // rest of the codes ...
}

if(anEmptyArray)上的比较结果总是 true有一个空数组。