Question

我正在尝试设置State以从Api onClick响应。状态得到了更新，但是当我第一次单击时却没有，第二次单击是的，它的确会更新。

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


  };

有人可以帮助我吗？

Answer 1

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内部执行该函数，则不会引起第二个render：

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>
    );
}

Answer 2

您没有提供完整的代码，但是从这段内容中，我看到console.log(this.state.recipesList);在promise链之外。

由于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);
    }); 
 });

如何设置状态以从APi答复

2 个答案:

在componentWillMount（）中使用提取功能

直接从地图进行渲染。