尝试将数据绑定到下拉列表,但未绑定任何内容,下拉列表显示“未选中”。
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",
}
]
答案 0 :(得分:0)
React组件是同步呈现的,这意味着您的UI在您收到HTTP响应之前即已呈现,并且在响应稍后到达时不会更新。这意味着您的for (let i in global_num) { ...
代码在响应到达之前 运行。
相反,您的组件应:
useState
useEffect
then
回调中),并使用响应数据调用setState
-这将更新组件的状态并触发重新渲染