onClick 事件侦听器在 React 中无法正常工作

Question

我的代码不能正常工作，我不明白为什么..

const MenuPage = () => {
    const [title, setTitle] = useState("");

    function handleClick(e){
        e.preventDefault();
        setTitle(e.currentTarget.childNodes[0].innerText);
        console.log(title);
    }

    return (
        <div id="menus">
            <div className="menus" onClick={(e) => handleClick(e)}>
                <div className="menu-box" id="menu" name="" >
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#099FFF" className="tt-icon" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
                </svg>
                <span className="menuTitle">Menu option 1</span>
                </div>
            </div>
        </div>  
    );
};

起初我以为 onClick 不起作用，但最终我发现它确实起作用并且 state 确实在改变，但是 [= 中的第二个语句 console.log(title) 12=] 函数在第一次点击时未加载，我需要点击两次然后在控制台

中加载 title

Answer 1

useState 是 asynchronous.You 更新后可以使用 useEffect 访问最新状态。

useEffect(() => { console.log(title)}, [title])

上面的useEffect只会在title更新时调用

onClick 事件侦听器在 React 中无法正常工作

onClick eventlistener is not working properly in React

function

event-handling

reactjs