使用setState回调更新React状态时子组件未重渲染的原因解析

问题背景 #

父组件维护一个对象类型的state，通过输入框更新其属性值后传递给子组件展示。使用setState的回调函数更新状态时，子组件并未重新渲染，无法显示最新值。已知通过创建新对象传入setState可修复，但需了解底层机制及回调方式失效的原因。

底层运行机制：React的状态更新判定逻辑 #

React触发组件重渲染的核心依据是状态/ props的引用是否发生变化，具体通过**浅比较（shallow comparison）**实现：

• 当调用setState时，React会将新状态与旧状态进行浅比较：
  • 若为基本类型（如字符串、数字），直接比较值是否相等；
  • 若为引用类型（如对象、数组），则比较引用地址是否相同。
• 只有当比较结果为"不相等"时，React才会标记组件需要重渲染，并更新DOM及子组件。

为什么回调方式无法触发重渲染 #

在问题代码中，setState的回调函数直接修改了prevState的属性，然后返回原对象：

setData((prevState) => {
  prevState.label = e.target.value;
  return prevState;
})

这里的关键问题是：

1. prevState是React当前维护的状态对象的引用，直接修改其属性属于可变操作（mutation），并未创建新的对象；
2. 回调返回的prevState与旧状态的引用完全相同，React浅比较后判定状态未发生变化，因此不会触发父组件的重渲染；
3. 父组件未重渲染，子组件接收的props也不会更新（即使data.label的实际值已改变），最终导致子组件无法展示最新值。

正确的修复方案 #

必须创建新的对象引用来触发React的状态更新逻辑，常见实现方式有两种：

方式1：展开运算符创建新对象 #

setData((prevState) => {
  return { ...prevState, label: e.target.value };
})

方式2：使用Object.assign #

setData((prevState) => {
  return Object.assign({}, prevState, { label: e.target.value });
})

这两种方式都会生成一个新的对象，新状态与旧状态的引用不同，React浅比较后会判定状态更新，触发父组件重渲染，子组件也会接收到新的props并重新渲染。

错误与正确代码对比 #

错误代码 #

import { useState } from "react";
import Heading from "./components/Heading";
import "./styles.css";

export default function App() {
  const [data, setData] = useState({});

  return (
    <div className="App">
      <h1>{data.label}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input
        type="text"
        placeholder="Enter value"
        onChange={(e) =>
          setData((prevState) => {
            prevState.label = e.target.value;
            return prevState;
          })
        }
      />
      <Heading data={data.label} />
    </div>
  );
}

export default function Heading({ data }) {
  return (
    <div className="App">
      <h1>{data}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

正确代码（使用展开运算符） #

import { useState } from "react";
import Heading from "./components/Heading";
import "./styles.css";

export default function App() {
  const [data, setData] = useState({});

  return (
    <div className="App">
      <h1>{data.label}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input
        type="text"
        placeholder="Enter value"
        onChange={(e) =>
          setData((prevState) => ({
            ...prevState,
            label: e.target.value
          }))
        }
      />
      <Heading data={data.label} />
    </div>
  );
}

export default function Heading({ data }) {
  return (
    <div className="App">
      <h1>{data}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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