高阶函数执行

Question

我对重组中的高阶函数感到困惑。我正在使用codePen中的示例，并且不确定为什么更改功能不起作用。

我尝试在控制台中播放，但无济于事。

const IncreaseHappiness2 = withStateHandlers(
  () => ({happiness: 0}), {
    onClick: ({happiness}) => () => ({happiness: happiness + 1}), 
  }
); 

当我更改为

const IncreaseHappiness2 = withStateHandlers(
  () => ({happiness: 0}), {
    onClick: ({happiness})  => ({happiness: happiness + 1}), 
  }
); 

当我单击按钮时什么也没发生。

当我更改为：

const IncreaseHappiness2 = withStateHandlers(
  () => ({happiness: 0}), {
    onClick: ({happiness}) => () => ({happiness: happiness + 1}), 
  }
); 

我收到“我NaN％快乐按钮！

我正在使用它进行练习：https://codepen.io/Kiwka/pen/vWZVvL?editors=0111

Answer 1

我认为您不能将标准的“要传递的参数”更改为withStateHandlers。它期望您传递初始状态或函数以获取初始状态。这样，第二个参数便是用于更新状态的函数。

请阅读文档：https://github.com/acdlite/recompose/blob/master/docs/API.md#withstatehandlers

此外，如果您真的想了解高阶功能/组件的工作原理，我认为您应该尝试创建自己的HOF / HOC。我确信互联网上有大量的文章。

希望这会有所帮助。