React获取当前状态值的最优实践探讨及问题咨询

你的两种现有方案都不符合最佳实践，下面逐个分析问题，并给出更合理的解决思路：

一、你的两种方案存在的问题 #

1. 函数式状态更新方法 #

• 两次调用setSortBy完全冗余：你先直接更新状态，再用函数式更新获取当前值，逻辑上重复且没必要。
• 跨组件更新警告：在setSortBy的回调中调用setProductsList，会导致React在处理状态更新的阶段触发另一个状态更新，进而引发"在渲染其他组件时更新当前组件"的警告。

2. useEffect钩子方法 #

• 原地修改数组：sort()是原地修改原数组的方法，你直接用prodsCatList.sort(...)会改变原数据的引用内容，这不仅可能导致React无法正确识别状态变化，还会在添加prodsCatList到依赖数组时触发无限循环（因为数组内容变化但引用未变，React的浅比较会误判，或者原数组本身是动态更新的状态）。
• 依赖警告的本质：你忽略依赖是因为没解决核心的数组修改问题，而非依赖本身不该加。

二、最佳解决方案：使用派生状态（useMemo） #

排序后的产品列表是完全依赖原数组prodsCatList和排序条件sortBy的派生值，不需要单独维护为状态。用useMemo直接计算即可，这是React官方推荐的处理此类场景的方式：

import { useMemo } from 'react';

// 直接计算排序后的列表，无需维护额外状态
const sortedProductsList = useMemo(() => {
  if (prodsCatList.length === 0) return [];
  
  // 先复制原数组，避免原地修改原数据
  const sorted = [...prodsCatList];
  
  switch(sortBy) {
    case 'priceHToL':
      sorted.sort((a, b) => b.prodPrice - a.prodPrice);
      break;
    case 'priceLToH':
      sorted.sort((a, b) => a.prodPrice - b.prodPrice);
      break;
    case 'qtyHToL':
      sorted.sort((a, b) => b.totalProdQty - a.totalProdQty);
      break;
    case 'qtyLToH':
      sorted.sort((a, b) => a.totalProdQty - b.totalProdQty);
      break;
    case 'salesHToL':
      sorted.sort((a, b) => b.sales - a.sales);
      break;
    case 'salesLToH':
      sorted.sort((a, b) => a.sales - b.sales);
      break;
    default:
      // 默认返回原顺序
      break;
  }
  
  return sorted;
}, [prodsCatList, sortBy]); // 所有依赖明确声明，无ESLint警告

使用时直接用sortedProductsList即可，既避免了状态同步问题，也没有任何警告。

三、若必须维护productsList状态的修正方案 #

如果业务场景要求必须单独维护productsList状态，可修正useEffect方案，核心是避免原地修改数组，并正确声明依赖：

import { useEffect } from 'react';

useEffect(() => {
  if (prodsCatList.length === 0) return;
  
  // 复制原数组，生成新的引用
  const sortedList = [...prodsCatList];
  
  switch(sortBy) {
    case 'priceHToL':
      sortedList.sort((a, b) => b.prodPrice - a.prodPrice);
      break;
    case 'priceLToH':
      sortedList.sort((a, b) => a.prodPrice - b.prodPrice);
      break;
    case 'qtyHToL':
      sortedList.sort((a, b) => b.totalProdQty - a.totalProdQty);
      break;
    case 'qtyLToH':
      sortedList.sort((a, b) => a.totalProdQty - b.totalProdQty);
      break;
    case 'salesHToL':
      sortedList.sort((a, b) => b.sales - a.sales);
      break;
    case 'salesLToH':
      sortedList.sort((a, b) => a.sales - b.sales);
      break;
    default:
      break;
  }
  
  setProductsList(sortedList);
}, [prodsCatList, sortBy, setProductsList]); // 明确所有依赖

此时只要prodsCatList是稳定的引用（比如父组件通过memo传递，或本地状态更新时生成新数组），就不会触发无限循环。

四、其他获取当前状态的通用方案 #

如果是在定时器、事件回调等场景中需要获取最新状态，可使用useRef保存状态的最新值：

import { useRef, useEffect } from 'react';

const sortByRef = useRef(sortBy);

// 同步状态到ref
useEffect(() => {
  sortByRef.current = sortBy;
}, [sortBy]);

// 在需要的地方直接访问最新状态
const handleSomeAction = () => {
  const currentSort = sortByRef.current;
  // 做后续操作
};

但此方案不适合你的排序场景，派生状态才是最优解。

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