React无法设置状态

问题描述：

我正在使用React并尝试使用API中的数据填充ImageGrid。没有与获取数据没有问题，但不知何故，我不能把我的状态与responseDataReact无法设置状态

我可以显示数据，同时我从API响应，但我不能把我的状态......

componentWillMount() 
{ 
    this.state = { 
    content: '' 
    }; 

    this.loadContent(); 
} 

loadContent() 
{ 
    ApiService.getTweets(topic,numberOfElements,offset).then((responseData) => { 
    console.log("Data is here",responseData); //<---------- HERE 
    this.setState({ 
     content: responseData 
    }); 
    }) 
    console.log("Data is not here",this.state.content); //<---------- HERE 
}

在这里，我得到的数据：

class ApiService {  

    static getTweets() {  

    return fetch("https://MyURL", { 
      method: 'get' 
      }) 
      .then((resp) => resp.json()) 
      .then(function(data) { 

      return data; 
      }).catch(function(error) { 
      console.log(error);// Error :(
      }); 
    } 
    } 
export default ApiService;

两个原因（至少）：setState不会立即设置状态，并且您正试图在调用之前访问它 - 您将其设置为异步回调。 –

[更改状态点击反应js]可能的重复（https://stackoverflow.com/questions/41278385/change-state-on-click-react-js） –

反应文档建议在使用时在构造函数中设置状态ES6课程。但是这应该会导致这个问题。 –

答

你有异步的问题：既fetch和setState是异步。

loadContent() { 
    ApiService.getTweets(topic,numberOfElements,offset).then((responseData) => { 
    console.log("Data is here",responseData); //<---------- HERE 
    this.setState({ 
     content: responseData 
    },() => { 
     // only now the state was updated 
     console.log("Data is here", this.state.content); 
    }); 

    // even the nest line runs to early 
    console.log("Data is not here",this.state.content); 

    }) 
    // the next line runs to early 
    console.log("Data is not here",this.state.content); 
}

答

您想使用set状态回调，因为状态不是立即设置的。

loadContent() { 
    ApiService.getTweets(topic,numberOfElements,offset).then((responseData) => { 
    console.log("Data is here",responseData); //<---------- HERE 
    this.setState({ 
     content: responseData 
    },() => { 
     console.log("Data is here",this.state.content); //<---------- HERE 
    ); 
    }) 
}

答

您需要实施componentDidUpdate。不要依赖承诺来了解组件何时更新。 React的生命周期将在系统更新后担心。见下文。

从这一点来说，你可以轻松地做类似

componentDidUpdate(prevProps, prevState) { if(prevState.content !== this.state.content) { console.log('I have new content!', this.state.content); } }

此外，您还可以忽略if语句，如果你只需要在你的组件一个setState()电话。所以简短版本如下：

componentDidUpdate(prevProps, prevState) { console.log('I have new content!', this.state.content); }

React无法设置状态

相关推荐