將新道具合並為州的正確方法

Question

我目前正在使用react-big-calendar處理日歷組件。

我目前有一個包裝器，可以從數據庫中提取數據並將其發送到日歷組件中。 但是，我正在做一項功能，可以將日歷事件從任何地方“發送”到該組件。

目前，我只有一些用例，這些用例來自網站的內置通知系統，它將提供一個功能，用於將外部事件作為通知發送到您自己的日歷中。 但是，我可能想通過我的套接字服務器（socket.io）將事件從另一個Web應用程序推送到用戶日歷。

從技術上講，我不確定進行此反應的“正確”方法是什么。

我現在的處理方式是我添加了

 static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.propInput === true){
        nextProps.reset()
        return {events : {...prevState.events, ...nextProps.events}}
    } else return null
}

在我的CalendarWrapper中，基本上對我執行以下操作：1）我更新從父組件或從redux存儲發送到包裝器中的道具（我將使用第二個）2）這會觸發getDrivedStateFromProps並檢查是否收到propInput為true，並且在這種情況下，它將作為道具向下發送的新事件合並到日歷的當前事件中。 3）然后運行一個回調函數（nextProps.reset（）），將propInput重置為FALSE，這將觸發另一次getDrivedStateFromProps運行，但是這次返回null並且不會導致新的setState。

這是我自己的夢想解決方案，如何將新事件從redux商店推送到此日歷包裝器。 這似乎是非正統的，但對我而言，這是擁有純redux和所有保存在redux中的東西並具有每個組件的局部狀態的中間立場的唯一方法。

是否有技術上更好，更完善的方法來解決此問題？

提前致謝。

Answer 1

我將使用發送到redux的新事件保存時間戳（而不是boolean propInput ）。 比較“上次更新時間”足以決定是否進行更新-無需清除propInput標志（無需調用reset() ... reducers ...等）。

您甚至不需要以狀態形式存儲此時間戳-無需使用getDerivedStateFromProps （ “無論原因為何，都在每個渲染器上觸發” ）-經典解決方案：

componentDidUpdate(prevProps) {
  if (this.props.newEventsTime !== prevProps.newEventsTime) {
    setState({events : {...this.state.events, ...this.props.newEvents}})
  }
}

更理想的應該是

shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.newEventsTime !== this.props.newEventsTime) {
    setState({events : {...this.state.events, ...this.props.newEvents}});
    return false; // no render needed in this pass
  }
  return (nextState.events === this.state.events) ? false : true;
}

-更新events對象的引用更改。

Answer 2

您必須返回prevState與新狀態的合並，如下所示：

static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.propInput === true){
    nextProps.reset()

    return {...prevState, ...{ 
               events : nextProps.events
           }
    }
} else return null
}