如何使用React Hook useState存储函数类型（如箭头函数）？

问题根源 #

其实这个坑我之前也踩过！核心是没搞清楚React useState的状态更新函数（就是setXxx这类）的工作逻辑：它有两种调用方式：

• 直接传一个具体的值：React会把这个值直接设为新状态。
• 传一个函数：React会把这个函数当成状态更新器，自动执行它，然后把执行结果作为新状态。

你代码里的问题就在这：当你调用setCommand(myCommand)时，myCommand是个函数，React直接把它当成了状态更新器，二话不说就执行了，所以callApi(42)被触发，返回的42就成了command的新值，完全不是你想要的把函数存起来的效果。

不用包装对象的解决办法 #

不想用包装对象（比如把函数塞到{ func: myCommand }这种对象里）的话，我们可以用个小技巧：给setCommand传一个返回目标函数的外层函数。这样React会执行这个外层函数，然后把它的返回值（也就是我们要存的那个函数）当成新状态，不会去执行目标函数本身。

修改你的handleButtonClick部分：

const handleButtonClick = () => {
  console.log("Button clicked.");
  const myCommand = () => callApi(42);
  // 用外层函数返回我们要存储的myCommand
  setCommand(() => myCommand);
};

再运行代码点击按钮，控制台输出就正常了：

command is undefined.
Button clicked.
command is () => callApi(42).

完美实现了把函数存入状态的需求，完全不需要额外的包装对象。

额外提醒 #

这里的关键就是要分清两种函数：

• 你想存储的业务函数：比如myCommand，是用来后续执行的。
• React的状态更新器函数：是用来计算新状态的，React会自动执行它。

通过在外层套一个更新器函数，我们就能让React返回我们真正想存的函数，而不是误执行它。

内容的提问来源于stack exchange，提问作者Joerg