React中给state赋值async函数引用时函数被意外执行如何解决

React 提供的状态更新函数（如示例中的setButtonAction）支持两种传参模式：

• 直接传入最终要设置的状态值
• 传入更新器函数：React 会自动调用该函数，将函数的返回值作为最终的状态值存入 state

你当前的写法中，传入setButtonAction的() => createSubscription(a ? b : c )会被 React 识别为更新器函数，因此会被立即执行，自然就触发了createSubscription的运行，而非将该函数作为值存入 state。

如果需要将函数本身作为状态值存储，只需要让更新器函数返回你要存入的目标函数即可，修改后的代码如下：

const Payment = props => {
    const [buttonAction, setButtonAction] = useState(null);

    useEffect(() => {
        if(满足判定条件){
            // 更新器执行后返回绑定好参数的目标函数，最终将该函数存入state
            setButtonAction(() => () => createSubscription(a ? b : c ));
        }
    }, [依赖项数组]);

    const createSubscription = async (sessionId) => {
        // 业务逻辑代码
    }

    // 后续调用示例：buttonAction?.()
}

修改后buttonAction存储的就是绑定了参数的createSubscription函数引用，需要执行时直接调用buttonAction()即可触发对应异步逻辑。

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