Как заполнить параметры для реакции выбора, выбирая значения из API, которые будут видны при нажатии на поле выбора? - PullRequest
Новая
       7

Как заполнить параметры для реакции выбора, выбирая значения из API, которые будут видны при нажатии на поле выбора?

0 голосов
/ 12 сентября 2018

Я использую реагирование-выбор для выпадающих в моем приложении.Ниже мое требование.

  • Выберите значение из раскрывающегося списка для первого компонента выбора (второй выбор еще не отображается).
  • На основе выбранного значения выберите параметры дляsecond Выберите компонент и визуализируйте второе поле 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.Может ли кто-нибудь сказать мне, как я смогу отобразить параметры, как только я нажму на поле выбора.

1 Ответ

0 голосов
/ 12 сентября 2018

'App1' рендерится до того, как вы действительно получите данные.Один из способов исправить это - подождать, пока данные будут извлечены, а затем отобразить «App1», например: 

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

Рабочий пример в codeandbox: https://codesandbox.io/s/m6wr8zvjj

...