React组件排序渲染滞后求助：需点击两次才生效

问题根源 #

1. 原地排序导致状态异常：Array.sort()是原地修改数组的方法，直接对状态或props数组排序会改变原引用，React无法正确识别状态变化，引发渲染滞后。
2. useEffect依赖错误：将sortedProducts加入依赖数组，每次状态更新都会重新触发useEffect，且排序基于已排序后的数组而非原始数据源，导致逻辑滞后一步。
3. 状态未同步props更新：当父组件传递的props.products变化时，sortedProducts初始状态不会自动同步，可能引发数据不一致。

修复后的代码 #

import "./productlist.scss";
import ProductCard from "../../../../Main Page Components/Trending Now/Product/ProductCard";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";

const ProductList = (props) => {
  const sortType = useSelector((state) => state.sort).sortType;
  const [sortedProducts, setSortedProducts] = useState(props.products);

  useEffect(() => {
    // 基于原始props数据的副本排序，避免修改原数组
    const sorted = sortProducts([...props.products], sortType);
    setSortedProducts(sorted);
  }, [sortType, props.products]);

  const sortProducts = (products, sortMode) => {
    console.log("sortMode", sortMode);
    switch (sortMode) {
      case "A-Z":
        return [...products].sort((a, b) => a.name.localeCompare(b.name));
      case "Z-A":
        return [...products].sort((a, b) => a.name.localeCompare(b.name)).reverse();
      case "default":
      default:
        return [...products];
    }
  };

  return (
    <div className="product-list padding">
      <div className="product-list-contents">
        {sortedProducts.map((singleProduct) => (
          <Link
            to={`/product/${singleProduct.sku}`}
            className="product-list-link"
            key={singleProduct.sku}
          >
            <ProductCard product={singleProduct} />
          </Link>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

关键改动说明 #

• 使用数组副本排序：通过[...products]创建数组浅拷贝，避免原地修改原数组，确保状态更新的引用一致性。
• 调整useEffect依赖：移除sortedProducts依赖，仅监听sortType和props.products，保证每次排序都基于最新的原始数据，消除循环更新和滞后问题。
• 补充default分支：避免sortMode不匹配时函数无返回值，提升代码健壮性。
• 同步props更新：当props.products变化时，useEffect会自动重新排序并更新状态，保持数据同步。

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