Question

嗨，伙伴们，我在reactjs中的新人我只是想知道当ajax数据结果与以前的状态不同时，可以呈现组件（通知组件）的反应方式，方法/生命周期？

var NewsList = React.createClass({
  getInitialState: function() {
    return ({
      data: [],
      showNotif: false,
      showLoading: false
    });
  },
  showNotification: function() {
    return (
      <Notification msg="new data" />
    );
  },
  ajaxRequest: function() {
  //do ajax request, load the result to this.state.data
  },
  componentWillMount: function() {
    this.setState({showLoading: true});
  },
  componentDidMount: function() {
    this.ajaxRequest();
    setInterval(this.ajaxRequest, 2000);
  },
  componentDidUpdate: function(prevProps, prevState) {
    if (this.state.data != prevState.data) {
      //this.setState({showNotif: !this.state.showNotif});
    }
  },
  render: function() {
    var loadingElement, notifElement;
    if (this.state.showLoading) {
      loadingElement = <Loader />
    }
    if(this.state.showNotif) {
      notifElement = this.showNotification();
    }
    return (
      <div>
        {notifElement}
        {loadingElement}
        <NewsItem data={this.state.data} />
      </div>
    );
});

所以，如果你看到我希望ComponentDidUpdate将读取已更改的state.data，如果它已更改（意味着ajax结果已更新），则会将this.state.showNotif设置为true并且渲染将调用showNotification()但它不是（它闪烁，真假来回设置，所以它被多次调用）

我应该怎样做才能实现并做到正确？

Answer 1

执行此操作的最佳方法是仅在与先前不同的情况下更新数据状态。例如：

  Exception in thread "main" java.util.regex.PatternSyntaxException: Illegal repetition near index 1
\${$1} 
 ^
    at java.util.regex.Pattern.error(Unknown Source)
    at java.util.regex.Pattern.closure(Unknown Source)
    at java.util.regex.Pattern.sequence(Unknown Source)
    at java.util.regex.Pattern.expr(Unknown Source)
    at java.util.regex.Pattern.compile(Unknown Source)
    at java.util.regex.Pattern.<init>(Unknown Source)
    at java.util.regex.Pattern.compile(Unknown Source)
    at myUtil.ReplaceString.fetchKeyword(ReplaceString.java:70)
    at myUtil.ReplaceString.main(ReplaceString.java:20)

但是如果你想每次更新状态并检查更改，那么更好的地方是componentWillReceiveProps：

componentDidMount(){
   this.ajaxRequest().done((data)=>{
       if(data !== this.state.data){
           this.setState({data: data, showNotif: true})
   })

不同之处在于，如果更改数据状态，它会导致组件呈现，之后在componentDidUpdate中，您将第二次呈现组件（下一个setState）。如果使用componentWillReceiveProps - 组件只渲染一次。

reactjs：如何检测更改的数据并显示通知

1 个答案: