Как включить значение из состояния реакции в качестве переменной в качестве части параметра запроса в вызове API - PullRequest
Новая
       12

Как включить значение из состояния реакции в качестве переменной в качестве части параметра запроса в вызове API

0 голосов
/ 19 мая 2019

Я делаю вызов API, который принимает параметр запроса, я хотел бы ввести параметр как значение из состояния, но я не могу использовать $ {this.state.mySearch} в качестве переменной в для запросапараметр.

Я попытался выполнить поиск в Google и обратиться за помощью в чаты и много разобрался с кодом. 


    state = {
        mySearch: 'apple'
      }
    ...

    ///This API call is defined outside of the main class component(not sure if that is ok)

    Index.getInitialProps = async function() {
      const res = await fetch(
        `https://newsapi.org/v2/everything?q=${this.state.mySearch}&apiKey=(privateApikey`
      )
      const data = await res.json()

      return {
        headlines: data
      }
    }

Я ожидаю, что вызов API будет выполнен с использованием значения, котороев состоянии я намереваюсь создать форму поиска, которая затем позволит пользователям передавать значение в состояние, которое затем будет использоваться в качестве переменной в вызове API.

Мое сообщение об ошибке: 

TypeError: Cannot read property 'mySearch' of undefined
Function._callee$
./pages/index.js:52
  49 |   }
  50 | }
  51 | 
> 52 | Index.getInitialProps = async function() {
  53 |   const res = await fetch(
  54 |     `https://newsapi.org/v2/everything?q=${this.state.mySearch}&apiKey=(myPrivateApiKey)`
  55 |   )

1 Ответ

0 голосов
/ 19 мая 2019

Тот факт, что он определен вне вашего класса компонентов, является той самой причиной, по которой вы не можете выполнить свой вызов API.

Вам нужно определить это в обработчике событий внутри вашего компонента, что-то вроде этого 

class Example extends React.Component{
   state = {
      search: "",
      headlines: ""
   }

   handleOnChange = (event) => {
      this.setState({
        search: event.target.value
      })
   }

   handleOnSubmit = async (event) => {
       event.preventDefault()
       const res = await fetch(
       `https://newsapi.org/v2/everything?q=${this.state.search}&apiKey=(privateApikey`)
       const data = await res.json()

       this.setState({
          headlines: data
       })
   }

   render(){
     return(
     <form onSubmit={this.handleOnSubmit}>
         <input onChange={this.handleOnChange} value={this.state.search}/>
     </form>
    )
   }

}
...