Question

这是我的代码：

我想设置函数结果，并将其作为对某些 state 变量的承诺，但是在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本质上是异步的，因此console.log甚至在setState更新状态之前就已经运行。

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

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

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

Answer 2

除了Suraj所说的以外，如果sum是异步的，也许正在执行AJAX调用，则function randomArray(length, sum) { const rawRandom = new Array(length).fill(0).map(() => Math.random()); const multiplier = sum / rawRandom.reduce((a, b) => (a + b), 0); return rawRandom.map(n => (n * multiplier)); } const rand = randomArray(5, 1); console.log(rand); console.log('Sum: ', rand.reduce((a, b) => (a + b), 0));也必须位于_getUserData回调中，因为您依赖于{{1 }}以获取_getProfileData。

尝试一下这种小吃：https://snack.expo.io/@transfusion/stackoverflow-53694220

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

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

2 个答案: