NextJS 13.3.0/React：状态更新后函数内值未同步问题求助

问题出在闭包捕获上：你在空依赖的useEffect里生成按钮并存入thingsToRender状态时，handleRevealButtonClick函数捕获的是组件初始渲染时的checkboxState（值为true）。后续checkboxState更新时，状态里的按钮绑定的还是旧版本的函数，完全感知不到新的状态值，所以点击时永远判断checkboxState为true。

方案1：避免将JSX存入状态（推荐） #

React的状态用来存数据就好，别存渲染好的JSX。直接在渲染阶段根据条件生成网格内容，这样每次组件渲染时都会用最新的checkboxState：

import React, { useEffect, useRef, useState } from 'react'

function Test() 
{
    const [checkboxState, setCheckboxState] = useState(true);
    const [someCondition, setSomeCondition] = useState(false);
    // 只存Firebase返回的原始数据，不存JSX
    const [gridData, setGridData] = useState([]);

    const dialogRef = useRef(null);
    const checkboxRef = useRef(null);

    const handleCheckboxChange = () =>
    {
        const checkbox = checkboxRef.current;
        setCheckboxState(!checkbox.checked); // 简化写法
    }

    const handleRevealButtonClick = () =>
    {
        if(checkboxState)
        {
            dialogRef.current?.showModal();
        }
    }

    const handleCloseButtonClick = () =>
    {
        dialogRef.current?.close();
    }

    useEffect(() =>
    {
        // 模拟从Firebase获取数据
        const mockQuery = [
            { data: '内容1' },
            { data: '内容2' }
        ];
        setGridData(mockQuery);
    }, [])

    // 直接在渲染时生成网格JSX
    const renderGrid = () => {
        return gridData.map((document, index) => 
            <React.Fragment key={index}>
                <div className='grid-item'>{document.data}</div>
                <div className='grid-item'>{document.data}</div>
                <div className='grid-item'>
                    <button onClick={handleRevealButtonClick}>Reveal modal</button>
                </div>
            </React.Fragment>
        )
    }

    return (
        <div>
            <dialog ref={dialogRef}>
                <div>
                    <input type="checkbox" ref={checkboxRef} onChange={handleCheckboxChange}/> 
                    <label>Not reveal again?</label>
                </div>
                
                <button onClick={handleCloseButtonClick}>Close</button>
            </dialog>

            {someCondition ? <h1>Some stuff</h1> : <div className='grid-container'>{renderGrid()}</div>}
        </div>)
}

export default Test;

方案2：若必须存JSX，更新触发时机 #

如果确实需要把JSX存在状态里，就得在checkboxState变化时重新生成网格，确保绑定的是最新的函数：

// 修改useEffect的依赖项，当checkboxState或查询数据变化时重新生成JSX
useEffect(() => {
    const grid = query.map((document, index) => 
        <React.Fragment key={index}>
            <div className='grid-item'>{document.data}</div>
            <div className='grid-item'>{document.data}</div>
            <div className='grid-item'>
                <button onClick={handleRevealButtonClick}>Reveal modal</button>
            </div>
        </React.Fragment>
    )
    setThingsTorRender(grid);
}, [checkboxState, query]) // 加入checkboxState作为依赖

方案3：用Ref存储最新状态（绕过闭包） #

要是不想频繁重新生成JSX，也可以用useRef存checkboxState的最新值，函数里直接取ref的current值，不受闭包限制：

// 用ref存最新的状态值
const checkboxStateRef = useRef(true);

const handleCheckboxChange = () =>
{
    const checkbox = checkboxRef.current;
    const newState = !checkbox.checked;
    setCheckboxState(newState);
    checkboxStateRef.current = newState; // 同步更新ref的值
}

const handleRevealButtonClick = () =>
{
    // 直接取ref的current，永远是最新值
    if(checkboxStateRef.current)
    {
        dialogRef.current?.showModal();
    }
}

• 尽量别把JSX放进React状态，状态负责管理数据，渲染逻辑丢到渲染阶段处理才是正确的姿势。
• 非得存JSX的话，一定要在依赖的状态/数据变化时重新生成，保证函数能捕获最新值。
• 用Ref绕过闭包属于特殊场景下的权宜之计，尽量优先用前两种方案。

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