无法从重构中更改状态状态处理程序

Question

我有这个按钮，可以用重新组合中的StateHandlers玩。目标只是将按钮状态从active:false更改为active: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
})