перекомпоновать withState, как обновлять изменения реквизита

У меня есть компонент более высокого порядка, который я пытаюсь немного изменить (я не знаком с перекомпоновкой).

Итак, это мой компонент:

<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» обновлялся?


reactjs higher-order-components recompose
person MichaelRazum    schedule 23.10.2017    source источник
comment
Классическая задача управления состоянием. Посмотрите на использование библиотеки, такой как mobx или redux. Другим решением было бы переместить логику вверх по дереву состояний к родителю, чтобы при срабатывании он обновлял дочерние элементы.. (я имею смысл?)   -  person archae0pteryx    schedule 24.10.2017
comment
Как сказал @archae0pteryx, вместо создания локального состояния поднятие состояния до родительского или событие глобального хранилища обычно решает эту проблему и создает более читаемый код.   -  person wuct    schedule 24.10.2017
comment
@archae0pteryx Да, я использую избыточность во всем своем приложении. Состояние mycenter происходит от редукса. Я пытаюсь передать состояние компоненту карты, но не хочу его переписывать. Я думаю, это решит это. Сейчас я работаю с классами и подключаю их к редуксу. Не уверен, как это сделать с компонентом карты HOC.   -  person MichaelRazum    schedule 24.10.2017

Ответы (2)


arrow_upward
4
arrow_downward

В настоящее время лучший способ — использовать жизненный цикл. обратный вызов исходного состояния (({ 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 }})
    }
  })
)
person Edan Chetrit    schedule 20.01.2018
comment
componentWillUpdate больше не рекомендуется:reactjs.org/docs/ Вероятно, вам следует использовать componentDidUpdate. - person Con Antonakos; 31.01.2019

arrow_upward
2
arrow_downward

Надеюсь, это не слишком поздно.

Я нахожу преобразование реквизита в государство немного грязным..

Прямо сейчас recompose позволяет отправлять функцию в качестве параметра для метода withProps. Вы можете сделать что-то вроде:

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

Таким образом, вы будете распространять свои реквизиты на свой компонент, и он будет обновляться при каждом изменении реквизитов.

person Alejandro Caceres    schedule 13.06.2018
comment
Привет. Я пробовал это, когда мои значения контекста не обновлялись. Но решение не помогло :( - person Jasurbek Nabijonov; 14.05.2021