无法通过重组更改状态 withStateHandlers

Question

我有这个按钮，并在 withStateHandlers 中使用 recompose。目标只是将按钮状态从活动：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>
  )
})

我点击按钮，然后我被重定向到新页面，然后我返回，按钮仍然 active: false 我希望它是 活动：真实

Answer 1

docs for withStateHandlers指定：

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

这意味着每个状态更新器属性是一个函数，它获取 state 和 props 参数以及 returns 另一个函数，后者又接受可选的有效负载参数（即调用 onTrigger 时作为参数传递的任何内容）和 returns 新状态。

您的 onTrigger returns 新状态而不是函数，因此类型不正确。如果将结果包装在箭头函数中，它应该可以工作：

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

无法通过重组更改状态 withStateHandlers

Can't change the state withStateHandlers from recompose

reactjs

recompose

react-router-v4