为什么下拉值不使用打字稿？

Question

尝试将数据绑定到下拉列表，但未绑定任何内容，下拉列表显示未选择任何内容。

 function Drop() {
    axios.get('/api/v1/users/')
    .then(function (response) {
      global_num = response.data;
      // console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });

    let lst = [];
    for (let i in global_num) {
      lst.push(global_num[i]['username']);
    }

    
    return (
      <select style={{ width : "300px" , height: "40px", margin:"20px", fontSize:"18px"}} name="res"> 
      {lst?.map((list) => (
      <option value={list}> {list} </option>
      ))}
      </select> 
    );
  }

API 结果，其中用户名用于显示为下拉选项

Response from API:

[
    {
        "id": 1,
        "username": "hanwat007@gmail.com",

    }
]

Answer 1

React 组件同步呈现，这意味着您的 UI 在您收到 HTTP 响应之前呈现，并且在响应稍后到达时不会更新。这意味着您的 for (let i in global_num) { ... 代码在 响应到达之前 运行。

相反，您的组件应该：

使用 useState
当您的组件首次呈现时开始发送请求，useEffect
在未设置状态的情况下呈现时，显示某种加载消息或微调器
当响应到达时（在您的 then 回调中）使用响应数据调用 setState - 这将更新组件的状态并触发 re-render
当组件呈现并且状态可用时，然后您可以使用它并显示所有列表项。

为什么下拉值不使用打字稿？

Why Dropdown values not coming using typescript?

api

typescript

dropdown

react-hooks

react-typescript