React中useEffect内对象变量更新后console.log始终输出空数组的原因排查

这个问题其实涉及到React的渲染周期、useEffect的执行时机，还有普通变量和React状态的区别，我来给你拆解一下你忽略的关键点：

1. useEffect的执行时机晚于渲染阶段的console.log #

当你的组件首次渲染时，会按顺序执行函数体里的代码：

• 先创建x对象，此时x.x1是空数组
• 接着执行console.log(x)，打印出这个空数组的对象
• 最后返回JSX，完成渲染

而useEffect的回调函数是在组件渲染完成、DOM更新之后才会执行的。也就是说，你往x.x1里push"hi"的操作，是在console.log已经执行完之后才发生的，所以你看到的初始打印结果自然是空数组。

2. 普通变量的修改不会触发组件重新渲染 #

你定义的x只是组件函数内部的一个普通变量，不是React的状态（比如用useState声明的变量）。当你修改x.x1的时候，React完全感知不到这个变化，所以组件不会重新渲染，自然也不会再次执行console.log来打印更新后的对象。

3. 控制台的“惰性求值”可能让你产生误解 #

有时候你点开控制台里的对象，会发现x1里有"hi"，这是因为浏览器控制台是惰性求值的——它显示的是你点开对象那一刻的当前状态，而不是你执行console.log时的状态。但你看到的初始预览（比如x1: []）确实是打印瞬间的真实状态。

怎么验证和解决？ #

• 如果只是想看到push后的结果，把console.log移到useEffect里面：

useEffect(() => {
  x.x1.push("hi")
  console.log(x) // 这里会打印包含"hi"的数组
})

• 如果希望修改x能触发组件重新渲染，让界面或者后续的console.log感知到变化，应该用useState来管理这个状态（注意不要直接修改状态对象，要创建新的引用）：

import React, {useEffect, useState} from "react";
import "./styles.css";

export default function App() {
  const [x, setX] = useState({ x1: [] });

  useEffect(() => {
    setX(prevState => ({ 
      ...prevState, 
      x1: [...prevState.x1, "hi"] 
    }))
  }, [])

  console.log(x) // 状态更新后组件会重新渲染，这里会打印更新后的对象
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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