React开发App.js中prop变化时子组件Header未重渲染问题

数据老陈

2026-10-6

问题根因

你直接修改了原始的state数组，未变更数组引用：list是引用类型的state，你代码中直接将原数组引用赋值给updated，调用push修改的是原数组本身，再传入setList的还是同一个引用地址。React做state更新浅比较时会判定state未发生变化，因此不会触发组件重渲染。
未将addList方法正确传递给需要调用它的路由/子组件：当前代码里路由组件没有拿到addList方法，无法正确触发父组件的state更新。
Header组件写死了渲染内容，即使props更新也无法直观看到变化：当前代码中Header里渲染的是固定字符串list，而非传入的list prop。

正确实现方案

1. 修复state更新逻辑，返回全新的数组

修改App.js中的addList方法，使用函数式更新+展开运算符生成新数组，保证引用地址变更触发重渲染：

function App() {
  const [list, setList] = useState([]);

  function addList(id) {
    // 用函数式更新拿到最新的prev state，展开生成新数组
    setList(prevList => [...prevList, id])
  }

  return (
    <Router>
      <div className="App">
        <Header list={list}></Header>
        <Switch>
          <Route exact path="/">
            {/* 将addList传递给需要调用的组件 */}
            <Home addList={addList} />
          </Route>
          {/* 其他路由同理传递addList，要是组件层级深可以用useContext做全局共享 */}
        </Switch>
      </div>
    </Router>
  );
}

const Header = ({list}) => {
  return (
    <div>
      {/* 渲染实际传入的list内容，这里用JSON.stringify方便测试，你可以换成你需要的渲染逻辑 */}
      <p>{JSON.stringify(list)}</p>
    </div>
  );
}