React Native-setState在构造函数中不起作用

Question

这是我的代码：

我想设置函数结果，将它们作为对某些状态变量的承诺，但是在then（）函数中使用this.setState之后，它似乎返回空对象！ 我检查了then（）块，它包含了应该包含的数据。

class ProfileScreen extends Component{
    constructor(props){
        super(props);

        this.state = {
            profile_data: {},
            user_data: {}
        };

        this._getUserData().then(response => {
            this.setState({user_data: response});
        });
        //Empty Results
        console.log(this.state.user_data);

        this._getProfileData(this.state.user_data.id).then(response => {
            this.setState({profile_data: response});
        })
    }
}

Answer 1

首先， 永远不要在使用setState的构造函数中设置状态，因为对setState的调用会导致重新渲染尚未构建的视图层次结构。

更好的方法是componentDidMount因为这是一个生命周期回调，可确保DOM已经被渲染一次，现在您可以更新状态以查看视图中的更改。

对于您的问题，空结果是由于setState本质上是异步的，因此，即使setState更新了状态， console.log也会运行。

您应该依赖setState的第二个参数，该参数是在状态更新后运行的回调。

this.setState({
   user_data: response
}, () => {
    console.log(this.state.user_data);
})

不要在构造函数中执行此操作。 在componentDidMount获取用户详细信息，然后根据需要设置状态

Answer 2

除了Suraj所说的以外，如果_getUserData是异步的，也许正在执行AJAX调用，则_getProfileData必须位于_getProfileData回调内部.then因为您依赖于user_data来获取profile_data 。

试试这个小吃： https : //snack.expo.io/@transfusion/stackoverflow-53694220

仅将承诺链接在一起可能会更清洁。