基于同一Redux数据创建独立状态变量，排序互不影响的问题求助

问题根源 #

你遇到的问题本质是JavaScript引用类型的浅拷贝导致的状态共享：

• searchResults是包含products数组的对象，属于引用类型
• 直接将searchResults赋值给services和servicesTwo时，两个状态变量实际指向内存中的同一个对象实例
• sort()是原地排序方法，会直接修改原数组，因此修改services.products时，servicesTwo.products因为指向同一个数组，顺序也会同步改变
• 同时直接修改状态中的数组违反了React状态不可变的原则，可能导致组件无法正确触发重新渲染

修复方案 #

需要从两个环节入手，确保两个状态完全独立，且修改状态时遵循不可变原则：

1. 初始化状态时做深拷贝 #

在useEffect中初始化services和servicesTwo时，要创建原对象的深拷贝，让它们指向不同的内存地址：

const searchResults = useSelector((state) => state.search);

useEffect(() => {
  if (searchResults) {
    // 方法1：JSON序列化实现深拷贝（适用于无函数/Symbol的普通对象）
    const copiedResults = JSON.parse(JSON.stringify(searchResults));
    setServices(copiedResults);
    setServicesTwo(JSON.parse(JSON.stringify(searchResults)));

    // 方法2：手动浅拷贝+数组拷贝（对象结构简单时性能更优）
    // setServices({
    //   ...searchResults,
    //   products: [...searchResults.products]
    // });
    // setServicesTwo({
    //   ...searchResults,
    //   products: [...searchResults.products]
    // });
  }
}, [searchResults]);

2. 排序时创建新数组再更新状态 #

不要直接修改services.products，先复制数组，排序后通过setServices更新状态：

const sortResults = (property) => {
  switch (property) {
    case 0:
      if (resultsSorting === 0) {
        const sortedProducts = [...services.products].sort((a, b) => {
          return Number(a.vendorRating) - Number(b.vendorRating);
        });
        setServices({ ...services, products: sortedProducts });
        setResultsSorting(undefined);
      } else {
        const sortedProducts = [...services.products].sort((a, b) => {
          return Number(b.vendorRating) - Number(a.vendorRating);
        });
        setServices({ ...services, products: sortedProducts });
        setResultsSorting(0);
      }
      break;
    case 1:
      if (resultsSorting === 1) {
        const sortedProducts = [...services.products].sort((a, b) => {
          return Number(a.vendorYearsExperience) - Number(b.vendorYearsExperience);
        });
        setServices({ ...services, products: sortedProducts });
        setResultsSorting(undefined);
      } else {
        const sortedProducts = [...services.products].sort((a, b) => {
          return Number(b.vendorYearsExperience) - Number(a.vendorYearsExperience);
        });
        setServices({ ...services, products: sortedProducts });
        setResultsSorting(1);
      }
      break;
  }
};

关键说明 #

• 深拷贝选择：如果searchResults有多层嵌套对象，推荐用JSON.parse(JSON.stringify())或lodash的cloneDeep；结构简单时手动拷贝更高效
• 遵循React状态不可变原则：永远不要直接修改状态变量（比如调用sort、push等方法），必须创建新的对象/数组后再通过setter更新，这样React才能检测到状态变化并重新渲染组件

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