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

僅將承諾鏈接在一起可能會更清潔。