Реагировать на список выбора из метода get - PullRequest
Новая
       13

Реагировать на список выбора из метода get

0 голосов
/ 12 апреля 2019

У меня проблема с React Select.Я использую метод get axios, чтобы получить данные в раскрывающемся списке, а затем хочу показать их в React Select.

Я скопировал код из примера на github, но он работает.

Метод Get: 

onListaDzial = () => {
  axios
    .get("http://10.10.10.27:81/eWizjaAPI/api/Listy/GetSlownikDzialy?", { params : {rok : this.state.rok }, headers: { 'Authorization' : 'Bearer '+ this.state.token }})
    .then(function (response) {
          let options = response.data.map( category => ({ value: category.text, label: category.text}));
          return { options };
}) 
    .catch(error => this.setState({ error,  }));

}

Реагирует на выбор кода при рендеринге 


<Select name="form-field-name" options={options} />

1 Ответ

2 голосов
/ 12 апреля 2019

Вам нужно будет установить состояние компонента, чтобы использовать его в функции рендеринга.Также вам нужно использовать функцию стрелки внутри .then, иначе этот контекст неправильный! 

onListaDzial = () => {
  axios
    .get("http://10.10.10.27:81/eWizjaAPI/api/Listy/GetSlownikDzialy?", { params : {rok : this.state.rok }, headers: { 'Authorization' : 'Bearer '+ this.state.token }})
    .then((response) => {
      let options = response.data.map( category => ({ value: category.text, label: category.text}));
      this.setState({options});
  }).catch(error => this.setState({ error,  }));
}

и при рендеринге 

<Select name="form-field-name" options={this.state.options} />

Вы также можете переписать функцию onListaDzial вasync / await вроде следующего: 

onListaDzial = async () => {
  const res = await axios.get("http://10.10.10.27:81/eWizjaAPI/api/Listy/GetSlownikDzialy?", { params : {rok : this.state.rok }, headers: { 'Authorization' : 'Bearer '+ this.state.token }}).catch(error => this.setState({ error,  }));
  let options = res.data.map( category => ({ value: category.text, label: category.text}));
  this.setState({options});
}
...