Javascript 如何在不调用setState或使componentWillUpdate在React中执行的情况下呈现组件？

假设我有2个反应组分，如下所示：

var Parent = React.createClass({
   getInitialState: function(){
      return ({
       child: <Children state="someState" />      
      });      
   },

  parentFunction: function() {
     this.setState({
       child: <Children state="otherState" />
     });
  },

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

  //...other methods
});

var Children = React.createClass({
   componentWillMount: function() {
      this.getData();
   },

   componentWillUpdate: function() {
      this.getData();
   }

   getData: function() {
      var that = this;

      $.getJSON("https://some.url", function(result){
           //Do something with result         

           that.setState();
      }); 


   }

   //other methods ....

});

var Parent=React.createClass({
getInitialState:函数（）{
返回({
儿童：
});      
},
parentFunction:function（）{
这是我的国家({
儿童：
});
},
render:function（）{
返回(
{this.state.child}
);
}
//…其他方法
});
var Children=React.createClass({
componentWillMount:function（）{
这是getData（）；
},
componentWillUpdate:函数（）{
这是getData（）；
}
getData:function（）{
var=这个；
$.getJSON（“https://some.url，函数（结果）{
//做一些有结果的事情
即：setState（）；
}); 
}
//其他方法。。。。
});

第一次渲染父对象时，也会第一次渲染子对象。因此，将执行Children的componentWillMount，然后调用Children的getData。由于getData调用getJSON（异步函数），因此它不能“按时”返回第一次呈现的子对象的结果。因此，我的解决方案是在getJSON完成后调用setState（），使子对象再次呈现。到目前为止一切似乎都很好

但当我调用parentFunction来更新子对象时，问题就出现了。由于更新了子项，因此将执行其组件willupdate，因此调用getData（）。但是getData（）在处理完结果后会依次调用setState（）。并且setState（）使componentWillUpdate被执行。这就是我陷入无限循环的原因

我正在寻找一种方法来呈现组件，而无需调用setState或使componentWillUpdate执行。但我还没找到。

---

我不知道如何解决这个问题。任何帮助都将不胜感激

无需找到一种不调用setState即可进行渲染的方法

要避免循环，只需使用componentWillReceiveProps（）代替componentWillUpdate，如中所述

但是，您甚至可以使用如下模式测试组件是否真的应该更新：

var Children = React.createClass({
    componentWillMount: function() {
        this.getData();
    },

    componentWillReceiveProps: function(nextProps) {
        // some sort of logic that defines if new 
        // props are different than the previous ones
        if(nextProps.data !== this.props.data)
        {
            this.getData();
        }
    }

    getData: function() {
        var that = this;

        $.getJSON("https://some.url", function(result){
            //Do something with result         

            that.setState();
        }); 
    }
}

根据我的说法，你也在错误地使用父母的状态

状态应该包含关于组件本身的数据和属性，而不是其他组件

这样重写会有帮助：

var Parent = React.createClass({
   getInitialState: function(){
      return ({
       something: [] // example
      });      
   },

  parentFunction: function() {
     this.setState({
       something: [12] // example
     });
  },

  render: function() {
      return (
              <div>
                   <Children state={this.state.something} />
              </div>
      );
  }

  //...other methods
});

var Parent=React.createClass({
getInitialState:函数（）{
返回({
某物：[//示例
});      
},
parentFunction:function（）{
这是我的国家({
something:[12]//例如
});
},
render:function（）{
返回(
);
}
//…其他方法
});

---

希望这能有所帮助。

这里的核心问题是，响应组件更新发出ajax请求是不好的。您需要弄清楚实际应该触发ajax请求的是什么，例如一个道具在一个渲染到下一个渲染时不同，或者用户按下按钮，等等。使用组件将接收道具。查看React文档。谢谢！你刚刚救了我的命很高兴它有所帮助：）