Question

我在我的应用中使用react和react-redux。在提交表单数据时，我在redux操作中调用API并将其分发给reducer。减速机返回＆＃34; {... state，message：action.message}＆＃34;当我的组件连接到商店时，它会调用componentWillReceiveProps生命周期方法。到目前为止，一切都很完美。

再次当用户填写表单并第二次提交时，将重复相同的操作。但是现在componentWillReceiveProps函数没有被触发。这背后的原因是reducer返回相同的状态＆＃34; {... state，message：action.message}＆＃34;类似于以前的状态数据。如果我在reducer中添加一个带有随机数的新对象，如下所示，一切正常。

{... state，message：action.message，random：Math.random（）}

我知道当商店发生变化时会触发componentWillReceiveProps。但是如何在提交表单时第二次触发componentWillReceiveProps方法？

这是我的componentWillReceiveProps方法，其中我向用户显示成功消息。

componentWillReceiveProps = props => {
    if( typeof props.message !== "undefined" && props.message !== "" ){
        //Show a success message notification bar
        this.state._notificationSystem.addNotification({
            title : 'Success message',
            message: 'Form has been successfully submitted',
            level: 'success',
            position : 'br',
            autoDismiss : 10
        });
    }
}

Answer 1

react-redux让你强制重新渲染包裹的组件，即使它没有改变。为此，您必须将{ pure: false }选项作为connect函数的第4个参数传递。

可以找到快速示例here。

但在你的情况下，它看起来像一个反模式。首先，它将在所有状态更改时更新，即使这些更改与表单提交无关。其次，我会说这种逻辑（即“让我们显示成功通知”）应该存在于执行事务的内部动作中，而不是组件。

ReactJs - 从reducer返回相同的状态时不会触发componentWillReceiveProps

1 个答案: