1

我目前正在使用 react-big-calendar 开发日历组件。

我目前有一个 Wrapper，它从数据库中提取数据并将其发送到日历组件中。但是，我正在开发一项功能，即可以从任何地方“发送”日历事件到该组件。

目前我只有用例，它来自网站的内置通知系统，将有一个功能可以将作为通知发送的外部事件添加到您自己的日历中。但是，我可能想通过我的套接字服务器（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，如果是这种情况，它将作为 props 向下发送的新事件合并到日历的当前事件中。3) 然后它运行一个回调函数 (nextProps.reset())，将 propInput 重置为 FALSE，这会触发 getDrivedStateFromProps 的另一次运行，但这次返回 null 并且不会导致新的 setState。

这是我自己设想的如何将新事件从 redux 商店推送到这个日历包装器的解决方案。这似乎很不正统，但对我来说，这是与纯 redux 和一切保存在 redux 中的中间立场并拥有每个组件的本地状态的唯一方法。

有没有一种技术上更好、更高效的方法来解决这个问题？

提前致谢。

4

2 回答 2

1

我会保存一个时间戳（而不是 boolean propInput），并将新事件发送到 redux。比较“上次更新时间”足以做出更新决定 - 无需清除propInput标志（不reset()调用......减速器......等）。

您甚至不需要将此时间戳存储在状态中 - 无需使用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对象参考更改。

于 2019-05-18T14:42:57.243 回答
0

您必须返回 prevState 与新状态的合并，如下所示：

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

    return {...prevState, ...{ 
               events : nextProps.events
           }
    }
} else return null
}
于 2019-05-18T14:09:34.293 回答