React中useEffect更新routes后data.route_list为何未同步变化？

核心问题出在**data状态的初始化与更新逻辑**上：

1. 组件首次渲染时，routes的初始值是空数组，此时data通过useState初始化，route_list直接引用了当时的空数组。这个初始化操作只会在组件挂载时执行一次，后续不会自动触发。
2. 当useEffect触发setRoutes更新routes后，组件会重新渲染，但data状态并没有被同步更新——因为没有任何逻辑让data跟着routes的变化而改变。
3. 所以每次渲染时，console.log(data.route_list)打印的始终是初始化时的那个空数组，和最新的routes状态完全无关。

根据你的需求，有两种常见处理方式：

方式1：将data改为派生状态（推荐） #

如果data只是基于routes和固定值生成的，没必要单独存为状态，直接在渲染时计算即可：

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

export function App(props) {
  const [routes, setRoutes] = useState([]);
  // 直接派生data，无需单独维护状态
  const data = { 
    login_type: 70,
    roleId: "1223",
    route_list: routes
  };

  console.log(data.route_list)
  useEffect(() => {
    setRoutes(["hello", 2, 3, 3])
  },[])

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

方式2：手动同步data状态 #

如果必须把data存为状态，需要监听routes的变化，主动更新data：

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

export function App(props) {
  const [routes, setRoutes] = useState([]);
  const [data, setData] = useState({ 
    login_type: 70,
    roleId: "1223",
    route_list: routes
  });

  console.log(data.route_list)
  useEffect(() => {
    setRoutes(["hello", 2, 3, 3])
  },[])

  // 监听routes变化，同步更新data中的route_list
  useEffect(() => {
    setData(prev => ({
      ...prev,
      route_list: routes
    }))
  }, [routes])

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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