React-Native setState 不异步更新状态

Question

import React from 'react';
import {View}  from 'react-native';
import Button from 'react-native-button';

const gData  = [{counter: 0}];

export default class App extends React.Component {

  constructor(props)
  {
    super(props);
    this.state = {data: {}};
    console.log("Constructor: ", this.state.data);
  }
  _handlePress()
  {
    console.log("Pressed Button")
    gData[0].counter += 1;
    console.log("Before setState: ", gData);
    this.setState({data: gData}, console.log("After setState: ", this.state.data));
  }

  render() {
    return (
      <View style={{flex:1, justifyContent: 'center',}}>
        <Button
          onPress={() => this._handlePress()}>
          Press Me!
        </Button>
      </View>
    );
  }
}

嗨，我有一个用于本机反应应用程序的简单代码，它在屏幕上创建一个按钮，按下它应该更新对象内的计数器并将对象存储在状态中。但是，当我运行应用程序并按下按钮时，我在日志中得到了这个：

11:19:43 PM：运行 Android 为 x86_64

构建的 SDK 上的应用

11:19:43 PM：构造函数：{}

下午 11:23:20：按下按钮

11:23:20 PM：setState 之前：[{"counter":1}]

11:23:20 PM：setState 之后：{}

所以由于某种原因状态没有更新。有谁知道是怎么回事吗？

Answer 1

很确定如果你这样调用 console.log 它将立即被调用，而不是一旦状态完成更新，尝试将其放入匿名函数中：

    this.setState({data: gData}, () => console.log("After setState: ", this.state.data));

React-Native setState 不异步更新状态

React-Native setState not updating state asynchronously

setstate

react-native