React中设置函数时如何避免内部函数被意外调用？

为什么函数会被意外执行？ #

当你调用setFirstModalButtonFunction时传入了一个箭头函数，React会自动把这个函数识别为状态更新器函数——这是React为了让开发者基于旧状态计算新状态设计的机制。一旦React检测到你传给setState的参数是函数，就会立即执行它，并用它的返回值作为新的状态值。所以你写的console.log('fn ran')和setOpen(true)会在handleClick触发时直接执行，而不是把这个函数存起来留到后续使用。

怎么阻止它被立即执行？ #

你需要让React把目标函数当成普通的状态值存储，而非当成更新器函数执行。可以通过函数式更新返回目标函数的方式实现：

修改后的handleClick代码：

const handleClick = () => {
    setOpen(true);

    // 用外层函数作为更新器，返回要存储的目标函数
    setFirstModalButtonFunction(() => () => {
        console.log('fn ran');
        setOpen(true);
    });
};

或者更清晰的写法（把目标函数抽离出来）：

const handleClick = () => {
    setOpen(true);

    // 定义要存储的函数
    const modalButtonAction = () => {
        console.log('fn ran');
        setOpen(true);
    };

    // 通过更新器函数返回这个函数，避免被立即执行
    setFirstModalButtonFunction(() => modalButtonAction);
};

额外注意 #

确保在Modal组件中使用这个函数时，是作为事件回调传递，比如：

// Modal组件内部的按钮
<button onClick={props.firstModalButtonFunction}>点击执行</button>

不要写成onClick={props.firstModalButtonFunction()}——后者会在组件渲染时立即执行函数，这也是React新手常踩的坑。

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