Как я могу использовать selectedValue из выпадающего списка, чтобы затем вызвать API, используя его, и визуализировать JSON?

Question

Мне нужно создать выпадающий список с 3-4 вариантами и, основываясь на значении, выбранном пользователем, я должен затем вызвать API, используя выбранное значение в качестве строки поиска. JSON, возвращаемый этим API, должен затем отображаться как DataGrid в разделе mainContent страницы.

Вот как выглядит выпадающий список, довольно простой:

 handleDropdownChange(e) {
    this.setState({selectedValue: e.target.value});
  }

render() {

   <div>
      <select id="dropdown" onChange={this.handleDropdownChange} className={classes.mainContent}>
                <option value="">select</option>
                <option value="option1">1</option>
                <option value="Option2">2</option>
                <option value="Option3">3</option>
      </select>
   </div>

И я могу тогда сделать:

<div>Selected value is : {this.state.selectedValue}</div>

Это работает!

Но вместо вышесказанного я хочу использовать что-то вроде функции:

 grabData = () => {
   fetch(API + {this.state.selectedValue})
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('something is wrong');
        }
      })
      .then (data => this.setState({ myhits: data.hits, hitsIndex: 0, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }
 }

Итак, внутри render () я хочу сделать в основном (смотрите, что я хочу использовать selectedValue в функции grabData выше):

<div>
   Selected value is : {this.grabData}
</div>

Я открыт для предложений о том, как лучше всего это сделать. Это то, о чем я мог думать, но это не работает. Или даже лучше, если кто-нибудь поможет мне отобразить этот JSON в сетке данных. Надеюсь, я не всех смутил :)

reactjs

0

reactjs_user 19 Авг 2019 в 11:00

Answer 1

Если вы хотите запустить grabData, когда пользователь изменил значение, вызовите эту функцию при изменении. изменить эту функцию:

handleDropdownChange(e) {
   this.setState({selectedValue: e.target.value}, () => {
      // Once the state is updated - call grabData...
      this.grabData()
   });
}

0

Gugu 19 Авг 2019 в 08:32

Answer 2

Я отметил ответ Гугу как принятый, так как в конечном итоге он работал :-) Спасибо, приятель.

Итак, я получил это на работу. Вот как:

Вот так выглядит мой выпадающий список. Смотрите, я добавил grabData () внутри моего handleDropdownChange ():

handleDropdownChange(e) {
    this.setState({selectedValue: e.target.value});
       this.grabData()
  }

grabData = (selectedValue) => {
  fetch(API + {selectedValue})
        .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error('something is wrong');
        }
      })
      .then (data => this.setState({ selectedData: data.hits, selectedIndex: 0, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
 }

И тогда в render () я добавил карту для данных:

render() {

   <div>
      <select id="dropdown" onChange={this.handleDropdownChange} className={classes.mainContent}>
                <option value="">select</option>
                <option value="option1">1</option>
                <option value="Option2">2</option>
                <option value="Option3">3</option>
      </select>
   </div>
   <div>
        <ThemeProvider theme={LIGHT_THEME}>
            {
              selectedData.map(hit =>
                <ThemeProvider theme={DARK_THEME}>
                <div key={hit.objectID}>
                  <button> {hit.created_at} {hit.url}</button>
                </div>
                </ThemeProvider>
            )}
        </ThemeProvider>
   </div>

Мне просто нужно выяснить, как визуализировать каждый клик. Прямо сейчас он рендерится при первом выделении и не дает свежих результатов, если я изменяю выделение.

0

reactjs_user 19 Авг 2019 в 09:22

Как я могу использовать selectedValue из выпадающего списка, чтобы затем вызвать API, используя его, и визуализировать JSON?

2 ответа

Похожие вопросы

Новые вопросы

reactjs