reactjs：如何检测更改的数据并显示通知(reactjs: how to detect data changed and show notification)

reactjs：如何检测更改的数据并显示通知(reactjs: how to detect data changed and show notification)

嗨，大家好我在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并且render将调用showNotification()但它不是（它闪烁，真假来回摆动，所以它被称为很多次）

我应该做些什么来实现它并使其正确？

hi guys im new in reactjs i just want to know the react way, method/lifecycle that can render component (notification component) when ajax data result is different with previous state?

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> ); });

so if you can see i expect the ComponentDidUpdate will read the changed state.data and if it's changed (meaning the ajax result has new updated), it will set this.state.showNotif to true and render will call showNotification() but it's not (it's blinking, true-false set back and forth, so it's called many times)

what should i do to achieve it and make it right?

最满意答案

要做到这一点，最好的办法是只在与以前不同时更新数据状态。 例如：

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

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

componentWillReceiveProps(nextProps, nextState) { if (this.state.data != nextState.data) { this.setState({showNotif: true}); } }

不同的是，如果更改数据状态，则会导致组件渲染，然后在componentDidUpdate中，第二次渲染组件（下一个setState）。 如果使用componentWillReceiveProps - 组件仅渲染一次。

Te best way to do this is updating data state only if is different then previous. For example:

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

But if you want to update state every time and check changes, the better place is componentWillReceiveProps:

componentWillReceiveProps(nextProps, nextState) { if (this.state.data != nextState.data) { this.setState({showNotif: true}); } }

The difference is that if you change data state, it cause component rendering and after that in componentDidUpdate, you render component second time (next setState). If you use componentWillReceiveProps - component render only one time.