在更改之前，ReactJs会打印新的状态值

Question

我有一个名为data的变量，我将其设置为＆＃39; First＆＃39;然后我将值改为＆＃39; Second＆＃39;并再次显示所以我的输出应该是

首先 第二

但它打印

二 第二

如果你能告诉我为什么我得到第二和第二而不是第一和第二，我将不胜感激。如果你能告诉我怎样才能实现第一和第二。

这是我的代码段。

<script type="text/babel">

   var FirstDiv = React.createClass({

      getInitialState: function() {
          return {data:'First'};
      },
      changeStateVal: function() {
          this.setState({data:'Second'});
      },

      render: function() {
        return (
            <div>
                {this.state.data} <br/>
                {this.changeStateVal()}
                {this.state.data}
            </div>
        );
      }
   });

    ReactDOM.render(
        <FirstDiv />,
        document.getElementById('first')
    );
</script>