为什么下拉字体值不使用打字稿来?

时间:2020-09-18 08:32:04

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

尝试将数据绑定到下拉列表,但未绑定任何内容,下拉列表显示“未选中”。

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

    }
]

1 个答案:

答案 0 :(得分:0)

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

相反,您的组件应:

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