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

【问题标题】：Why Dropdown values not coming using typescript?为什么下拉值不使用打字稿来？
【发布时间】：2020-09-18 08:32:04
【问题描述】：

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

 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",

    }
]

【问题讨论】：

因为get是异步的，所以你的返回在api调用完成之前完成。

标签： typescript api react-hooks dropdown react-typescript

【解决方案1】：

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

相反，您的组件应该：

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

【讨论】：