无法创建动态下拉列表，因为 useState return 首先为空，然后 return 带有数据

Question

我在 useEffect 挂钩中使用 fetch API 从 API 获取数据。在 useEffect 中，我在可变 userList 变量中设置 API 数据，但由于 null 最初我无法创建动态下拉列表。

我的代码是：

useEffect(() => {
    (async () => {
      const response = await fetch("https://localhost:44316/api/auth/getavailableusers", {
        headers: {
          "Content-Type": "application/json"
        
        },
        credentials: "include",
      });
      const content = await response.json();
      setUserList(content);
    })();
  },[]);

组件：

 <div className="mb-3">
            <select
              id="choices-multiple-remove-button"
              placeholder="Select Maximum 5 Members"
              multiple
              onChange={(e) => setGroupUsers(e.target.value)}
            >
              {userList?.map(user => <option value={user?.userId} key={user?.userId}>{user?.name}</option>)}
            </select>
          </div>

如果我 console.log(userList) 我首先发现我得到的是 null 然后我在 userList 中获取数据。

Answer 1

使用初始状态作为[]，即useState([])。

Answer 2

您可以检查它在您的模板中是否为 null，或者只是将初始状态设置为空数组而不是 null。

<div className="mb-3">
    <select
    id="choices-multiple-remove-button"
    placeholder="Select Maximum 5 Members"
    multiple
    onChange={(e) => setGroupUsers(e.target.value)}
    >
    {userList ? userList?.map(user => <option value={user?.userId} key={user?.userId}>{user?.name}</option>) : []}
    </select>
</div>

Answer 3

就像另一个答案指出的那样，您应该首先通过以下方式初始化您的状态

useState([]);

我假设您不想在接收数据之前渲染 Select 组件。

因此，仅当您的数组不为空时才尝试呈现下拉列表。

<div className="mb-3">
 {userList.length > 0 &&
    <select
    id="choices-multiple-remove-button"
    placeholder="Select Maximum 5 Members"
    multiple
    onChange={(e) => setGroupUsers(e.target.value)}
    >
    {userList?.map(user => <option value={user?.userId} key={user?.userId}>{user?.name}</option>)}
    </select>
}
</div>

无法创建动态下拉列表，因为 useState return 首先为空，然后 return 带有数据

Unable to create Dynamic dropdown because useState return first null then return with data

reactjs

fetch-api

use-effect

use-state