我在我的应用程序中使用react-select作为下拉菜单。以下是我的要求。
- 从第一个 Select 组件的下拉列表中选择一个值(第二个 Select 尚未呈现)。
- 根据所选值获取第二个选择组件的选项并呈现第二个选择框。
单击第二个选择的文本区域。
发生了什么:我看到默认下拉列表中没有选项。我可以 仅当我在框中键入内容时才能看到来自 API 的值，并且 与默认过滤条件相匹配。
我想要发生什么:它 应显示我们从 API 调用中获取的值。
const options = [{ label: "first", value: "first" }];
let options1 = [];
async function copyOptionsForAsync() {
let response = await fetch("https://jsonplaceholder.typicode.com/todos");
let data = await response.json();
data.forEach(element => {
let dropDownEle = { label: element["title"], value: element };
options1.push(dropDownEle);
});
}
class App extends React.Component {
constructor() {
super();
this.state = {
isSelected: false
};
}
handleOnchange = () => {
this.setState({ isSelected: true });
copyOptionsForAsync();
console.log(options1);
};
render() {
return (
<div className="App">
<Select
name="option"
options={options}
onChange={this.handleOnchange}
/>
{this.state.isSelected ? <App1 /> : null}
</div>
);
}
}
class App1 extends React.Component {
render() {
return (
<div className="App">
<Select name="options2" options={options1} />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
这是codesandbox page的链接。谁能告诉我单击选择框后如何才能显示选项。
最佳答案
“App1”在您实际获取数据之前进行渲染。解决此问题的一种方法是等待获取数据，然后渲染“App1”，如下所示:
handleOnchange = async () => {
await copyOptionsForAsync();
this.setState({ isSelected: true });
};
codesandbox 中的工作示例:https://codesandbox.io/s/m6wr8zvjj
关于javascript - 如何通过从 api 获取值来填充 react 选择的选项，以便在单击选择框时可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52290318/