我有这个按钮,并且在 recompose 中玩 withStateHandlers 。目标只是将按钮状态从有效: 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 ,但我希望它保持 active:true strong>
答案 0 :(得分:4)
withStateHandlers(
initialState: Object | (props: Object) => any,
stateUpdaters: {
[key: string]: (state:Object, props:Object) => (...payload: any[]) => Object
}
)
这意味着每个state-updater属性都是一个函数,该函数获取state
和props
参数并返回另一个函数,该函数依次接收可选的有效负载参数(即,当您在运行时作为参数传递的任何参数)调用onTrigger
)并返回新状态。
您的onTrigger
返回新状态而不是函数,因此类型不正确。如果将结果包装在箭头函数中,它将起作用:
onTrigger: ({ active }) => () => ({
active: true
})