React函数组件setFunction通过函数引用调用失效问题

问题场景 #

实现点击按钮累加count的功能：函数组件中点击按钮后count仅首次增长，后续无变化；但类组件实现相同逻辑可正常运行。
函数组件里把返回按钮的函数存入了useState的content状态，改为普通const变量功能正常，但业务需要将该函数存在state中以实现复用和额外逻辑。

问题原因 #

函数组件中，useState的初始值只在组件首次渲染时执行一次。当button函数被存在content状态后，它捕获了首次渲染时的count（值为0）和handlePlus函数。后续组件重新渲染时，content状态没有更新，点击按钮时始终调用的是首次渲染时的handlePlus，里面的count一直是0，累加后变成1，之后再点击还是基于0计算，导致count停在1。
而类组件中this始终指向组件实例，this.handlePlus每次调用都能获取最新的this.state.count，所以可以正常累加。

解决方案 #

方案一：count变化时更新content状态 #

每次count更新后，重新创建button函数并更新content状态，确保函数能捕获最新的变量。

方案二：使用函数式更新count #

修改handlePlus，直接用setCount的函数式更新，这样不需要依赖外部的count变量，即使函数是首次渲染时的版本，也能正确获取最新的count值。

代码示例 #

方案一代码 #

import React, { useState, useEffect } from "react";

function Page(props) {
    const [count, setCount] = useState(0);
    const [content, setContent] = useState({});

    // count变化时重新生成button函数并更新content
    useEffect(() => {
        setContent({
            button: (value) => {
                return <button onClick={() => handlePlus(value)}>+</button>;
            },
        });
    }, [count]);

    function handlePlus(value) {
        console.log("value=", value);
        setCount(count + 1);
    }

    return (
        <div>
            <span>Functional Component Count = {count}</span>
            {content.button?.(10)}
        </div>
    );
}

export default Page;

方案二代码 #

import React, { useState } from "react";

function Page(props) {
    const [count, setCount] = useState(0);

    const [content, setContent] = useState({
        button: (value) => {
            return <button onClick={() => handlePlus(value)}>+</button>;
        },
    });

    function handlePlus(value) {
        console.log("value=", value);
        // 函数式更新，直接获取上一次的count值
        setCount(prevCount => prevCount + 1);
    }

    return (
        <div>
            <span>Functional Component Count = {count}</span>
            {content.button(10)}
        </div>
    );
}

export default Page;

内容的提问来源于stack exchange，提问作者Harikrishnan.A.S -