React函数式组件中State无法更新的问题求助

你的代码中hello状态其实已经成功更新为true了，之所以看起来没变化，是因为组件没有渲染任何依赖该状态的内容，导致你无法直观感知到状态更新。

验证状态是否真的更新 #

你可以通过两种方式确认：

• 在setHello之后添加日志输出
• 在组件的返回值中渲染hello的状态值

修改后的代码示例 #

export default function DataCentreSummaryPage() {
    const [hello, setHello ] = useState(false)

    useEffect(() => {
        const checkHello = () => {
            if([1,2,3].includes(1)){
                setHello(true);
                // 注意：setState是异步操作，这里打印的是更新前的旧值
                console.log('触发状态更新，当前旧值：', hello); 
            } 
        }
        checkHello()
    }, []);

    // 渲染状态值，直观看到更新后的结果
    return (
        <div>
            当前hello状态：{hello.toString()}
        </div>
    );
}

关键说明 #

React的setState是异步操作，如果你在setHello(true)之后立即打印hello，会拿到更新前的旧值，但组件重渲染后，hello会变成最新的true，此时渲染出来的内容就会显示正确的状态。

只要你在组件中使用hello状态（比如渲染它、或者在其他依赖它的钩子中使用），就能看到状态更新带来的变化。

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