React-Native setState 不异步更新状态答案

【问题标题】：React-Native setState not updating state asynchronouslyReact-Native setState 不异步更新状态
【发布时间】：2017-06-20 22:28:25
【问题描述】：

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>
    );
  }
}

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

11:19:43 PM：在为 x86_64 构建的 Android SDK 上运行应用

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

11:23:20 PM：按下按钮

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

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

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

【问题讨论】：

标签： react-native setstate

【解决方案1】：

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

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

【讨论】：

你是对的！谢谢！他们总是说第二个参数是更新完成后的回调，因此很容易错过您需要一个匿名函数来包装它。至少如果你是像我这样的新手......