如何使用 api 填充选择选项

IT技术 javascript reactjs
2021-04-28 17:12:23

这是我的代码。我正在从支持中获取学生的数据,对其进行过滤。我无法为选择选项设置默认值,而且两者都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>
2个回答

问题:

您的学生对象在 API 调用之前是空的,并且未在您的setState. 因此students.map在您的select元素中使用会导致错误(因为您无法映射未定义的数组)。

解决方案:

在使用mapwith数组之前有两件重要的事情

  1. 检查数组定义(数组是否已定义并存在?)
  2. 检查它的长度(数组是否有一些内容?)

第一的

通过简单的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一个空数组。

选项值应该是 _id。在您的 find 中,您正在比较,student._id但在选项中,您传递的 value propsstudent.id就是 find 返回 undefined 的原因

<option key={student._id} value={student._id} 
   {student.name}
</option>