我有一个按钮来显示使用dialog html元素创建的模态，该按钮存储在一个条件的状态（thingsToRender）中（在本例中，我在useEffect钩子中模拟了该条件），然后如果someCondition为true，则呈现thingsToRender中的内容。问题是checkboxState在handleRevealButtonClick中似乎总是true，即使在handleCheckboxChange中它的实际值被更改为false后，询问是否不得再次显示模态的复选框被选中。
似乎问题在于将button函数handleRevealButtonClick存储在thingsToRender状态下，但我没有找到一个解决方案来满足我的需求，因为我需要以这种方式呈现按钮，因为在真实的的例子中，这个按钮包含在网格项中。那么，如何才能使该按钮不卡在checkboxState的先前状态中呢？
下面是最小的可重复性示例：

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

function Test() 
{
    const [checkboxState, setCheckboxState] = useState(true);
    const [someCondition, setSomeCondition] = useState(false);
    const [thingsToRender, setThingsTorRender] = useState(<h1>Something</h1>);

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

    const handleCheckboxChange = () =>
    {
        const checkbox = checkboxRef.current;

        if(checkbox.checked)
        {
            setCheckboxState(false)
        }
        else
        {
            setCheckboxState(true);
        }
    }

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

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

    useEffect(() =>
    {
        // Problem seems to be here
        setThingsTorRender(<button onClick={handleRevealButtonClick}>Reveal modal</button>)
    }, [])

    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 === true ? <h1>Some stuff</h1> : thingsToRender}
        </div>)
}

export default Test;

**编辑：**为了阐明为什么按钮需要处于状态，我将展示更接近真实的示例的示例（请注意，thingsToRender包含从firebase文档定义的网格元素）：

const renderGrid = () =>
    {
        // query from Firebase
        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)
    }

    useEffect(() =>
    {
        renderGrid();
    }, [])

    return (
        <div>
            {/* dialog */}

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