我有一个 React 组件需要对其 WillReceiveProps 状态进行一些计算。这是组件的样子:
import React from 'react'
import {connect} from 'react-redux'
import Message from './Message.react'
class MessageContainer extends React.Component {
constructor() {
super();
this.state = {show: false, message: null}
}
componentWillReceiveProps(nextProps, nextState) {
if (nextProps.message) {
this.setState({show: true});
setTimeout(
() => {
this.setState({show: false})
},
5000);
}
}
render() {
let message = this.props.message;
return (message ? <Message message={message} show={this.state.show}/> : null)
}
}
const mapStateToProps = (state,ownProps) => {
return {
message: state.message
}
};
export default connect(mapStateToProps, {})(MessageContainer);
想法是,如果名为“message”的 String prop 发生变化,那么我们应该显示该组件,并在 5 秒后隐藏它。
它正常工作,除了如果由于某种原因,新消息与上一条消息的值相同(例如“项目成功添加”)componentWillReceiveProps 没有被调用,这意味着组件是未显示。
我该如何处理这种情况?我愿意清除 Prop ,但我不确定在哪里做。
最佳答案
由于您使用 connect() 将您的组件连接到 redux,因此您导出的组件实际上是一个高阶组件,它通过 react-redux 绑定(bind)在内部为您实现 shouldComponentUpdate
(SCU)。 (类似于 React.PureComponent
)。
你的connected component只需要传单状态prop state.message
(没有dispatchProps和ownProps),只要保持不变,SCU返回false,你的连接的组件将不会重新呈现,因此您的 componentWillReceiveProps 不会被调用。
您可以通过将配置对象传递给第四个参数来关闭默认优化,如下所示,您的 componentWillReceiveProps 应该会按预期调用。
connect(
mapStateToProps,
null,
null,
{ pure: false }
)
关于reactjs - 如果 2 个不同的 Prop 更改具有相同的值,则不会调用 componentWillReceiveProps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48372936/