如何将函数存入React状态且不触发函数调用？

嘿，我来帮你搞定这个困扰！你遇到的核心问题其实是混淆了函数引用和函数执行，这在React状态管理里是很常见的小坑。

为什么函数会被自动调用？ #

如果你在设置state的时候写成了scrollToDonationSection()（带括号），JavaScript会立即执行这个函数，并把它的返回值存入state——这就是你看到函数自动触发的原因。而你真正需要存入的是函数本身，不是它执行后的结果。

正确的实现方式 #

1. 直接传递函数引用（无参数场景）

确保你传递的是函数本身，不要加括号：

// 子组件中正确的写法
props.setSubmitCallbackFunction(scrollToDonationSection);

这样存入state的是scrollToDonationSection这个函数的引用，只有当你后续主动调用submitCallbackFunction()时，它才会执行。

2. 传递带参数的函数（需要包裹匿名函数）

如果你的scrollToDonationSection需要接收参数，但又不想立即执行它，可以用一个匿名函数把它包裹起来：

// 子组件中传递带参数的函数
props.setSubmitCallbackFunction(() => scrollToDonationSection('donation-section'));

此时存入state的是这个匿名函数，当你后续调用submitCallbackFunction()时，才会触发内部的scrollToDonationSection并传入指定参数。

3. 调用state中的函数时做安全判断

为了避免初始state为undefined时调用出错，建议在调用前加个存在性检查：

// 在需要触发函数的地方
if (submitCallbackFunction) {
  submitCallbackFunction();
}

额外检查点 #

确认你的函数定义本身不是立即执行的（比如不要写成const scrollToDonationSection = (() => { ... })()这种立即执行函数表达式），否则不管怎么传递，它都会在定义时就执行一次。

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