重构 withState 如何更新道具更改答案

【问题标题】：recompose withState how to update on props changes重构 withState 如何更新道具更改
【发布时间】：2018-04-04 12:38:18
【问题描述】：

我有一个高阶组件，我尝试对其进行一些修改（我不熟悉重组）。

这就是我的组件：

<Map mycenter={mycenter}  />

如果 mycenter 更新，我希望地图组件更新或重新渲染。我正在尝试修改代码 https://github.com/istarkov/google-map-thousands-markers/blob/master/src/Map.js

我对代码做了一些修改。首先，地图中心设置为mycenter。这行得通。

withState('mapParams', 'setMapParams', ({ mycenter }) => ({ center:mycenter, zoom: 12 })),

之后用户可以点击某处，中心将被修改

withHandlers({
    onMapParamsChange: ({ setMapParams }) => ({ center, zoom, bounds }) => {
      setMapParams({ center, zoom, bounds });
      console.log('setMapParams', { center, zoom });
    },

如果“mycenter”更新，有没有办法让组件重新渲染或中心更新？

【问题讨论】：

一个经典的状态管理问题。考虑使用诸如 mobx 或 redux 之类的库。另一种解决方案是将逻辑向上移动到状态树到父级，以便在触发时更新子级..（我有意义吗？）
就像@archae0pteryx 所说的那样，不是创建本地状态，而是将状态提升到父级或事件全局存储通常会解决这个问题并产生更具可读性的代码。
@archae0pteryx 是的，我在整个应用程序中都使用了 redux。 mycenter 状态来自于 redux。我试图将状态传递给地图组件，但不想重写它。我想那会解决这个问题。现在我正在处理类并将它们连接到 redux。不知道如何使用 HOC 地图组件。

标签： reactjs higher-order-components recompose

【解决方案1】：

目前，最好的方法是使用生命周期。初始状态（({ mycenter }) => ({ center:mycenter, zoom: 12 })）的回调只发生一次。

const enhanceMap = compose(
  withState('mapParams', 'setMapParams', ({ mycenter }) => ({ center: mycenter, zoom: 12 })),
  withStateHandlers({...}),
  lifecycle({
    componentWillUpdate(nextProps) {
      if (this.props.mycenter !== nextProps.mycenter)
        this.setState({mapParams: { center: nextProps.mycenter, zoom: 12 }})
    }
  })
)

【讨论】：

componentWillUpdate 不再推荐：reactjs.org/docs/… 你应该使用componentDidUpdate。

【解决方案2】：

希望这不会太晚。

我发现将道具转换为状态有点混乱..

现在，recompose 允许您发送一个函数作为 withProps 方法的参数。您可以执行以下操作：

withProps( props => ({
  mycenter: props.mycenter,
  zoom: 12,
}))

这样，你会将你的 props 向下传播到你的组件，并且只要 props 发生变化，它就会更新。

【讨论】：

你好。当我的上下文值没有更新时，我尝试了这个。但解决方案没有帮助:(