ReactJs - componentWillReceiveProps在從還原器返回相同狀態時未觸發

我在我的應用程序中使用了react和react-redux。在提交表單數據時，我使用redux動作調用API並將其分配給reducer。 Reducer返回「{... state，message：action.message}」，當我的組件連接到商店時，它又調用componentWillReceiveProps生命週期方法。到目前爲止，一切都很完美。ReactJs - componentWillReceiveProps在從還原器返回相同狀態時未觸發

當用戶填寫表單並再次提交時，重複同樣的操作。但是現在componentWillReceiveProps函數沒有被觸發。背後的原因是reducer返回類似於以前的狀態數據的狀態「{... state，message：action.message}」。如果我在下面的減速器中添加一個帶有隨機數的新對象，那麼一切正常。

{...狀態，消息：action.message，隨機：的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 
     }); 
    } 
}

來源

2017-04-18 Prem

當道具改變時'componentWillReceiveProps'觸發。你想改變道具嗎？聽起來像你沒有，但你有一些你想要運行的代碼。在這種情況下，這個代碼可能在錯誤的地方。 –

從reducer返回的狀態將被映射到使用react-redux的道具，通過這種方式，第一次狀態和道具正在改變，但第二次它返回與之前相同的狀態。隨後調用的相同動作將返回與之前相同的狀態。在我的情況下，它將數據存儲在服務器（{... state，message：action.message}）後成功發送消息。 – Prem

Redux狀態被映射到道具。如果狀態沒有改變，道具不會改變 - componentWillReceiveProps沒有被調用。憑藉自己的邏輯完美感覺。如果我明白你想要什麼，你不應該問如何讓這個功能運行，你應該問如何顯示一個成功的信息。 –

react-redux讓你強迫即使道具沒有改變包裝的組件的重新呈現。爲此，您必須通過{ pure: false }選項作爲connect函數的第4個參數。

快速示例可以找到here。

但是在你的情況下，它看起來像一個反模式。當然，它會更新全部狀態變化，甚至與表單提交無關。其次，我會說這種邏輯（即「讓我們展示成功的通知」）應該存在於執行交易的行動中，而不是組件。

來源

2017-04-18 12:11:47 fkulikov

ReactJs - componentWillReceiveProps在從還原器返回相同狀態時未觸發

回答

相關問題