React中点击按钮需两次才能获取当前state的问题如何解决？

问题原因 #

你遇到的核心问题是React的useState更新是异步批量执行的。调用setPost后，React不会立即更新post状态，而是将更新任务加入队列，等当前事件循环结束后再统一处理。所以在setPost之后立刻console.log(post)，拿到的始终是更新前的旧状态，看起来就像需要点击两次才能获取到最新值。

解决方案 #

方案1：直接使用待添加的新内容或在setPost回调中获取新值 #

既然你是把tw.current.value添加到数组头部，完全可以直接打印这个值，或者在setPost的回调里生成新数组并打印：

function PostNow(event){
    // 先创建新数组，再更新状态并打印
    const newPostList = [tw.current.value, ...post];
    setPost(newPostList);
    console.log(newPostList);
}

// 或者用函数式更新的方式，在回调里获取并打印新状态
function PostNow(event){
    setPost((oldpost) => {
        const newPostList = [tw.current.value, ...oldpost];
        console.log(newPostList);
        return newPostList;
    });
}

方案2：用useEffect监听post状态变化 #

如果需要在post状态真正更新完成后执行逻辑（比如打印、后续渲染操作），可以用useEffect监听post的变化：

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

function Poster() {
    const tw = useRef('')
    const [post, setPost] = useState([])
    
    // 仅当post状态变化时触发
    useEffect(() => {
        console.log(post);
    }, [post]);
    
    function PostNow(event){
        setPost((oldpost) => [tw.current.value, ...oldpost]);
    }
    
    return (
        <div >
            <textarea ref={tw} ></textarea>
            <button className="postIt" onClick={PostNow}>press me</button>
        </div>
    )
}

export default Poster

额外优化建议 #

尽量避免用ref获取表单值，React推荐使用受控组件模式：把textarea的值绑定到state，通过onChange实时更新，更符合React的数据流逻辑：

function Poster() {
    const [content, setContent] = useState('');
    const [post, setPost] = useState([])
    
    useEffect(() => {
        console.log(post);
    }, [post]);
    
    function PostNow(event){
        if (!content.trim()) return; // 过滤空内容
        setPost((oldpost) => [content, ...oldpost]);
        setContent(''); // 提交后清空输入框
    }
    
    return (
        <div >
            <textarea 
                value={content}
                onChange={(e) => setContent(e.target.value)}
                placeholder="输入内容..."
            ></textarea>
            <button className="postIt" onClick={PostNow}>发布</button>
        </div>
    )
}

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