Как установитьState, чтобы ответить от APi - PullRequest
Новая
       16

Как установитьState, чтобы ответить от APi

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

Я пытаюсь установить состояние ответа от Api onClick.Состояние получило обновление, но не при первом щелчке по нему, со вторым щелчком, да, оно обновляется. 

     fetch(URL)
          .then(res => res.json())
          .then(res => {
            this.setState({
              recipesList: res
            });
          });
    console.log(this.state.recipesList);


  };

Может кто-нибудь мне помочь?

Ответы [ 2 ]

5 голосов
/ 29 мая 2019

setState() является асинхронным.Это означает, что React будет выбирать, когда подходящее время для обновления состояния, что, вероятно, не так, когда вы делаете console.log().

Использование console.log() в обратном вызове setState, поэтому, когда состояние изменяется, ваша функция выполняется: 

fetch(URL)
   .then(res => res.json())
   .then(res => {
       this.setState({
          recipesList: res
       },()=>{//setState callback.
          console.log(this.state.recipesList);
       });
    });

Используйте функцию выборки в componentWillMount ()

Это связано с жизненным циклом ReactJS.Если вы выполните функцию внутри componentWillMount, она не вызовет второго рендеринга : 

class yourComponent extends React.Component{

  state = {
     recipesList: []
  }

  componentWillMount(){
    fetch(URL)
     .then(res => res.json())
     .then(res => {
         this.setState({
            recipesList: res
         },()=>{//setState callback.
            console.log(this.state.recipesList);
         });
      });
   }
}

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

Если вы использовали fetch внутри componentWillMount(), вы можете:

Рендеринг с карты напрямую для рендеринга.

В вашем методе рендеринга используйте функцию карты следующим образом: 

render(){
    return (
      <div className="App">
        <div className="contentWrapper">
          {
             this.state.recipesList.map(item => {
               return (
                  <div className="recispesList">
                     <h1>{item.title}</h1>
                  </div>
               );
             })
          }
        </div>
      </div>
    );
}
2 голосов
/ 29 мая 2019

Вы не предоставили полный код, но из этого фрагмента я вижу, что console.log(this.state.recipesList); находится вне цепочки обещаний.

Поскольку fetch() асинхронен, чем console.log(this.state.recipesList); будет выполнено до this.setState({ recipesList: res });

Поместите ваш console.log() в обратный вызов this.setState(), который будет выполнен после обновления состояния. 

fetch(URL)
 .then(res => res.json())
 .then(res => {
    this.setState({
      recipesList: res
    }, () => {
      console.log(this.state.recipesList);
    }); 
 });
...