React中JSON商品列表排序后组件仅生效一次，无法重新渲染求助

问题根源 #

1. 原地修改原始数组：Array.sort()是原地排序方法，第一次调用后会直接改变导入的products数组，后续再排序时数组已经是排序后的状态，所以看不到变化。
2. 渲染逻辑未关联state：页面渲染用的是原始products数组，而非state中的items，导致排序后state更新但页面不重新渲染。
3. reverse方法未执行：sortProductsReverse里的.reverse是方法引用，没有调用，应该写成.reverse()。
4. useState初始值未正确设置：初始时items为undefined，不符合React state的使用规范。

修复后的完整代码 #

import { useState } from 'react';
import products from "../data/products.json";
import Product from './Product';

function Shop(){
    // 初始化state为原始商品数据的副本，避免修改原数据
    const [items, setItems] = useState([...products]);

    // 价格升序排序：基于当前state创建新数组排序
    function sortProducts() {
        const sortedItems = [...items].sort(sortByProperty("price"));
        setItems(sortedItems);
    }

    // 价格降序排序：排序后执行反转方法
    function sortProductsReverse(){
        const sortedItems = [...items].sort(sortByProperty("price")).reverse();
        setItems(sortedItems);
    }

    // 可选：重置为原始未排序状态
    function resetProducts() {
        setItems([...products]);
    }

    return (
        <div>
            {/* 排序控制按钮 */}
            <button onClick={sortProducts}>价格从低到高</button>
            <button onClick={sortProductsReverse}>价格从高到低</button>
            <button onClick={resetProducts}>重置排序</button>

            {/* 渲染state中的商品列表 */}
            {items.map((product) => (
                <React.Fragment key={product.id}>
                    <Product {...product} />
                </React.Fragment>
            ))}
        </div>
    );
}

// 按指定属性排序的工具函数（示例实现）
function sortByProperty(property) {
    return (a, b) => {
        if (a[property] < b[property]) return -1;
        if (a[property] > b[property]) return 1;
        return 0;
    };
}

export default Shop;

关键修改说明 #

• 避免修改原始数据：用扩展运算符[...products]和[...items]创建数组副本，确保排序操作不会改变原始导入的JSON数据，同时让React能检测到state的变化触发重新渲染。
• 关联state与渲染：将渲染逻辑从products.map改为items.map，让页面内容完全由state控制，排序后state更新会自动同步到页面。
• 修复方法调用：把.reverse改为.reverse()，确保反转操作被执行。
• 添加唯一key：给map循环的子元素添加key属性（用商品的唯一ID），符合React的列表渲染规范，避免性能问题和警告。

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