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>

以下是我的data-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);
  }
});

这是我的chrome.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上，尝试接收最新道具：

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

Answer 2

您似乎需要更改ApplyInfo组件。测试中的流程如下：

Content.jsx的状态为'AAA'，并作为propIn将其传递给ApplyInfo.jsx
ApplyInfo组件将其自己的初始状态设置为“AAA”
ApplyInfo呈现state ='AAA'
将更改存储到“AAB”并发出更改
Content.jsx将状态更新为'AAB'，并将状态向下传递为支持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>

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

2 个答案: