如何解决将 API 数据应用到动态选择下拉列表中
目标:
使用 API 检索数据,然后将其应用于动态选择下拉列表。
id 应该是一个值,名称应该是一个标签。
问题:
如何检索数据并将其应用到选择下拉列表中?
信息:
*我是 React JS 的新手
堆叠闪电战:
https://stackblitz.com/edit/react-dropdown-sample-thx8xv?file=index.js
谢谢!
import React,{ Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
fetchUsers() {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then(response => response.json())
.then(data =>
this.setState({
users: data
})
)
.catch(error => this.setState({ error,isLoading: false }));
}
onSelect(option) {
console.log("You selected ",option.label);
console.log("You selected ",option.value);
//this.setState({selected: option})
}
render() {
const options = [
{ value: "one",label: "One" },{ value: "two",label: "Two",className: "myOptionClassName" },{ value: "three",label: "Default" }
];
const defaultOption = options[3];
return (
<div>
<Dropdown
options={options}
onChange={o => this.onSelect(o)}
value={defaultOption}
placeholder="Select an option"
/>
</div>
);
}
}
render(<App />,document.getElementById("root"));
解决方法
- 将 API 提取移至 componentDidMount 生命周期方法
- 将
state
初始化为一个空数组 -> 因为这将被更新为一个数组并且初始渲染不会导致进一步使用map
的问题 - 映射列表(获取数据并更新状态后的结果)- for more info on list building 然后绑定到下拉列表
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。