React - 为什么当我已经改变状态时我仍然得到相同的结果

Question

下面是我的content.jsx

var React = require('react');
var Reflux = require('reflux');

var ApplyInfo = require('./applyInfo');

var Actions = require('../actions/actions');
var DataStore = require('../stores/data-store');


module.exports = React.createClass({
  mixins: [
    Reflux.listenTo(DataStore, 'onChange'),
  ],
  onChange: function(event, allDatas) {
    console.log("o");
    this.setState({
      applyDatas: allDatas
    })
  },
  getInitialState: function() {
    console.log('g');
    return {
      section: "go_3",
      applyDatas: {test : "AAA"}
    }
  },
  componentWillMount: function() {
    console.log('c');
    Actions.getDatas();
  },
  render: function() {
    console.log("content = " + this.state.applyDatas.test);
    return <div>
      <div className="content">
        <ApplyInfo showValue={this.state.applyDatas.test} print={console.log("showValue = " + this.state.applyDatas.test)} />

       .......

下面是我的applyInfo.jsx

var React = require('react');
var Reflux = require('reflux');
var TextInput = require('./TextInput');
var Option = require('./option');
var Actions = require('../actions/actions');


module.exports = React.createClass({
  getInitialState: function() {
    return {
      // .....
      applyInfoDatas: this.props.showValue
    }
  },
  render: function() {
    console.log("value = " + this.state.applyInfoDatas);
    return <div className="section_3">

      <div className="info_input">
        <div className="demo_a demo2 lll">
          <TextInput id="loanAmount" title="loan" showValue={this.state.applyInfoDatas}/>
        </div>
      </div>

下面是我的数据-store.jsx

var Refulx = require('reflux');
var Actions = require('../actions/actions');

var allDatas = {test : "AAB"};
module.exports = Refulx.createStore({
  listenables: Actions,

  getDatas: function() {
    console.log("ready to send allDatas");
    this.trigger('change', allDatas);
  }
});

这是我的 console.log 来自 chrome

的结果

g
c
content = AAA
showValue = AAA
value = AAA
ready to send allDatas
o
content = AAB
showValue = AAB
value = AAA

为什么我最后还是得到了"value = AAA"，我认为它应该是"AAB"，我在调用Actions.getDatas和setState时已经改变了它。

Answer 1

在 ApplyInfo，试试这个来接收最新的 props 到 state：

...
componentWillReceiveProps: function() {
  this.setState({
    applyInfoDatas: this.props.showValue
  });
}
...

Answer 2

看来您需要更改 ApplyInfo 组件。您的测试流程如下：

Content.jsx 的状态为 'AAA'，并将其作为 prop 传递给 ApplyInfo.jsx
ApplyInfo 组件将自己的初始状态设置为 'AAA'
ApplyInfo 呈现状态 = 'AAA'
将更改存储到 'AAB' 并发出更改
Content.jsx 将状态更新为 'AAB'，并将状态作为 prop 传递给 ApplyInfo
ApplyInfo里面的状态没有更新; getInitialState 只被调用一次。第二次已经渲染了组件，只会更新，所以不会调用getInitialState。
所以 ApplyInfo 仍然有它呈现的状态 'AAA'。

两种处理方法：

您可以简单地将 showValues 渲染为道具。（但是您将需要在 TextInput 组件中使用 onChange 函数）
添加一个 componentWillReceiveProps 来更新你的状态（见@zvona 的回答）

广告 1。要制作 ApplyInfos.jsx 只需呈现新的 showValue：

module.exports = React.createClass({
  render: function() {
    console.log("value = " + this.props.showValue);
    return <div className="section_3">

      <div className="info_input">
        <div className="demo_a demo2 lll">
          <TextInput id="loanAmount" title="loan" showValue={this.props.showValue}/>
        </div>
      </div>

React - 为什么当我已经改变状态时我仍然得到相同的结果

React - why I still got same result when I already change the state

javascript

flux

reactjs

refluxjs