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

下面是我的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)} />

       .......

这是我从chrome获得的console.log结果

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时已经对其进行了更改。

在

ApplyInfo

上，尝试一下这个来接收最新的道具来声明：

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

---

看起来您需要更改

ApplyInfo

组件。您的测试流程如下所示：

• Content.jsx的状态为“AAA”，并将其作为道具传递给ApplyInfo.jsx
• ApplyInfo组件将其自身的初始状态设置为“AAA”
• ApplyInfo呈现状态='AAA'
• 存储对“AAB”的更改并发出更改
• jsx将状态更新为“AAB”，并将状态作为道具传递给ApplyInfo
• ApplyInfo内的状态未更新；getInitialState只调用一次。第二次呈现组件时，将只更新组件，因此不会调用getInitialState
• 所以ApplyInfo仍然有状态“AAA”，它呈现这个状态

解决这一问题的两种方法：

您可以简单地将

showValues

渲染为道具。（但是您需要在TextInput组件中使用onChange函数）

添加组件WillReceiveProps以更新您的状态（请参见@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>

module.exports=React.createClass({
render:function（）{
console.log（“value=“+this.props.showValue”）；
返回

在哪里使用onChange功能？

...
componentWillReceiveProps: function() {
  this.setState({
    applyInfoDatas: this.props.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>