如何通过从 api 中获取值来填充反应 select 的选项，以便在单击 select 框时可见？

Question

我在我的应用程序中使用 react-select 下拉菜单。以下是我的要求。

Select 第一个 Select 组件的下拉值（第二个 Select 尚未呈现）。
基于 selected 值获取第二个 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);

这是link到codesandbox page。谁能告诉我单击 select 框后如何显示选项。

Answer 1

'App1' 在您实际获取数据之前正在渲染。解决此问题的一种方法是等待获取数据然后呈现 'App1'，如下所示：

handleOnchange = async () => {
   await copyOptionsForAsync();
   this.setState({ isSelected: true });
};

codesandbox 中的工作示例：https://codesandbox.io/s/m6wr8zvjj

如何通过从 api 中获取值来填充反应 select 的选项，以便在单击 select 框时可见？

how to populate options for a react select by fetching values from an api to be visible when you click on the select box?

javascript

reactjs

react-select