Первоначально состояние пустое после использования запроса get в componentDidMount - PullRequest
Новая
       16

Первоначально состояние пустое после использования запроса get в componentDidMount

0 голосов
/ 02 декабря 2018

У меня есть компонент реагирования, где я хочу получить некоторые данные, используя componentDidmount для первоначального получения данных: 

componentDidMount(){
axios.get('https://opentdb.com/api.php?amount=50').then( response =>{
for(var key in response.data.results){

    const question = [...this.state.question, response.data.results[key].question];
    const answer = [...this.state.answer, response.data.results[key].correct_answer];
    const wrongAnswers = [...this.state.wrongAnswers, response.data.results[key].incorrect_answers];
    this.setState( prevState => ({
        question: question,
        answer: answer,
        wrongAnswers: wrongAnswers
 }));    
 }
  });
 }

проблема в том, что я не могу отобразить ответы неправильных ответов, поскольку они не определеныПервоначально 

  const {wrongAnswers} = this.state;
 {wrongAnswers[this.state.random] && this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => { //this does not display 
<p key={'Key-'+index}>here it is= {wrongAnswer}</p>
  })}

Я попытался сделать несколько проверок, чтобы увидеть, когда будет отображено, что 

 {this.state.wrongAnswers &&
console.log('the state is ' +this.state.wrongAnswers[this.state.random]);
} //this renders undefined initially, then renders an array of the right answers..

Что странно, что, если я просто отображаю состояние, не выполняя никаких операций, этоотображается правильно.

  <p>{this.state.question[this.state.random]}</p> // displays the state correctly

  <p>{this.state.wrongAnswers[this.state.random]}</p> //displays the state correctly

Я подозреваю, что я не могу выполнить какие-либо операции, потому что он изначально не загружен, но, поскольку я поместил его в componentDidMount, вы бы подозревали, что эта проблема не возникнет?

РЕДАКТИРОВАНИЕ:

всякий раз, когда я ставлю условия для простого парапрага 

{this.state.random !== undefined && this.state.wrongAnswers[this.state.random] !== undefined &&

    <p> condition is met </p>

  }

, он печатает

, но когда я сопоставляю массив: 

  {this.state.random !== undefined && this.state.wrongAnswers[this.state.random] !== undefined && this.state.wrongAnswers[this.state.random].map((wrongAnswer, index) => {
      console.log('inside the right method!'); //logs correctly three times like intended but does not print any jsx
    <p key={'Key-'+index}>here it is= {wrongAnswer}</p>

  })}

ничего не распечатано.

1 Ответ

0 голосов
/ 02 декабря 2018

Вы заявили, что <p>{this.state.wrongAnswers[this.state.random]}</p> работает, когда помещается в обработчик визуализации.Это означает, что вы всегда получите wrongAnswers т.е.не undefined и не вызывая wrongAnswers массив состояния, при первоначальном рендеринге не будет ошибок, и он получит правильный результат при следующем рендеринге.

Но используя этот код в хуке componentDidMount, 

{
  this.state.wrongAnswers &&
  console.log(this.state.wrongAnswers[this.state.random]);
}

В первый раз он, очевидно, получит undefined, потому что в это время this.state.random может быть undefined или null, и по этой причине вы получите undefined.Например: 

const arr = [1,2,3]
console.log(arr[undefined]) // undefined
console.log(arr[null]) // undefined

Таким образом, я бы посоветовал вам сначала проверить состояние random, а затем использовать с ним wrongAnswers: 

{
  this.state.random &&
  console.log(this.state.wrongAnswers[this.state.random]);
}

быть ненужным, поскольку wrongAnswers не undefined в начальном состоянии, как вы заявили.Если вы не установили wrongAnswers в исходное состояние, то для этого можно использовать только следующее: 

{
  this.state.wrongAnswers &&
  this.state.random &&
  console.log(this.state.wrongAnswers[this.state.random]);
}

Извините, я не понял перед вашим редактированием.Но вам нужно использовать оператор return, находясь внутри карты, так как вы используете фигурную скобку: 

return <p>...</p>

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

...