當您單擊選擇框時，如何通過從api獲取值來填充反應選擇的選項？

Question

我在應用程序中使用react-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頁面的鏈接。 誰能告訴我單擊選擇框后如何顯示選項。

Answer 1

在實際獲取數據之前，“ App1”正在呈現。 解決此問題的一種方法是等待數據被提取，然后渲染“ App1”，如下所示：

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

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