如何在从函数获取值后正确设置React状态？

• 首次加载打印orderList为空：因为fetchData是异步操作，调用getValueFunction后data还没完成更新，此时基于初始空data处理得到的sorted是空值；而且setOrderList是异步更新状态，执行console.log时状态还没完成更新，所以打印结果为空。
• 加入orderList到依赖导致无限循环：每次setOrderList(sorted)都会生成新的数组引用（Object.entries和sort都会返回全新数组），触发依赖变化后再次执行effect，又调用getValueFunction可能更新data，进而再次处理更新orderList，形成无限循环。

1. 拆分逻辑，监听data的变化 #

把数据请求和衍生状态处理拆成两个独立的useEffect，只在data更新时处理生成orderList，避免无效重复请求：

const getValueFunction = () => {
  dispatch(fetchData(setData, 1, pages.current, rowsNumber));
}

// 仅初始化时加载数据
useEffect(() => {
  pages.current = 1;
  getValueFunction();
}, []);

// 当data更新后，再处理生成orderList
useEffect(() => {
  // 跳过data为空的无效处理
  if (!data || data.length === 0) return;

  const obj = data.reduce((r, { setCode }) => {
    const l = setCode[0];
    if (!r[l]) r[l] = [setCode];
    else r[l].push(setCode);
    return r;
  }, {});

  const sorted = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));
  
  setOrderList(sorted);
}, [data]); // 仅依赖data，只有data变化时才执行

// 单独监听orderList的更新，查看最新值
useEffect(() => {
  console.log("orderList更新后的值：", JSON.stringify(orderList));
}, [orderList]);

2. 可选优化：避免不必要的状态更新 #

如果data引用频繁变化但内容未变，可以用useMemo缓存处理结果，减少不必要的setOrderList调用：

const getValueFunction = () => {
  dispatch(fetchData(setData, 1, pages.current, rowsNumber));
}

// 缓存处理后的排序结果，仅当data变化时重新计算
const sortedOrderList = useMemo(() => {
  if (!data || data.length === 0) return [];

  const obj = data.reduce((r, { setCode }) => {
    const l = setCode[0];
    if (!r[l]) r[l] = [setCode];
    else r[l].push(setCode);
    return r;
  }, {});

  return Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));
}, [data]);

// 初始化加载数据
useEffect(() => {
  pages.current = 1;
  getValueFunction();
}, []);

// 缓存结果变化时更新orderList
useEffect(() => {
  setOrderList(sortedOrderList);
}, [sortedOrderList]);

// 查看orderList最新值
useEffect(() => {
  console.log("orderList更新后的值：", JSON.stringify(orderList));
}, [orderList]);

关键注意点 #

• 异步请求和状态处理要分离：初始化请求只执行一次，等数据回来后再处理衍生状态。
• 依赖数组要精准：只监听数据源（比如data），不要监听衍生状态（比如orderList），否则会触发循环。
• React状态更新是异步的：不要在调用setState后立即打印状态，要通过单独的useEffect监听状态变化来查看最新值。

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