Невозможно изменить состояние с помощью StateHandlers из перекомпоновать

Question

У меня есть эта кнопка и играю с StateHandlers от перекомпоновки. Цель состоит в том, чтобы просто изменить состояние кнопки с активного: false на активное: true.

const EnhancedButton = withStateHandlers(
  ({ initialState = false }) => ({
    active: initialState
  }),
  {
    onTrigger: ({ active }) => ({
      active: true
    })
  }
)(({ active, onTrigger, children, id }) => {
  console.log(active)
  return (
    <Button
      onClick={() => onTrigger()}
      toggle
      active={active}
      size="massive"
      style={styles.button}
      as={Link}
      to={`/${id}`}
    >
      {children}
    </Button>
  )
})

Я нажимаю на кнопку, затем перенаправляюсь на новую страницу, затем возвращаюсь, и кнопка все еще активна: false, где я ожидаю, что она будет активной: true

Answer 1

Документы для withStateHandlers указывают:

withStateHandlers(
  initialState: Object | (props: Object) => any,
  stateUpdaters: {
    [key: string]: (state:Object, props:Object) => (...payload: any[]) => Object
  }
)

Это означает, что каждое свойство обновления состояния является функцией, которая получает state а также props аргументы и возвращает другую функцию, которая в свою очередь принимает необязательные аргументы полезной нагрузки (т.е. все, что вы передаете в качестве аргументов при вызове onTrigger) и возвращает новое состояние.

Ваш onTrigger возвращает новое состояние вместо функции, поэтому тип неверный. Если вы оберните результат в функцию стрелки, она должна работать:

onTrigger: ({ active }) => () => ({
  active: true
})