主页 / 问题 / 1478264
Accepted
Алексей Яковлев
Asked:2022-12-16 20:13:35 +0000 UTC2022-12-16 20:13:35 +0000 UTC

状态不更新

  • 772

窗口中有 3 个按钮，通过单击对产品进行排序：

const sortHandler = (name: any, idx: number): void => {
    switch (name) {
            case EProductSort.popular: // популярности
                setProducts(products);
                break;
            case EProductSort.price: // цене
                const sortProductsByPrice = products.sort((a: any, b: any) => {
                    return a.price - b.price;
                });
                setProducts(sortProductsByPrice);
                break;
            case EProductSort.alphabet: // алфавиту
                const sortProductsByAlphabet = products.sort((a: any, b: any) => {
                    if (a.name > b.name) return 1;
                    return 0;
                });
                setProducts(sortProductsByAlphabet);
                break;
            default:
                setProducts(list);
                break;
        }
    };

setProducts并products转移到props：

<Filter setProducts={setProducts} products={products} />

const { list } = useSelector((state: IState) => state.products);
const [products, setProducts] = React.useState<Array<IProduct>>(list);

当我点击按钮时，我到达某个按钮，在case那里我检查了正确排序的数组，但产品的状态没有更新

reactjs

1 个回答

  1. Best Answer

    该方法sort()不创建新对象Array，而是对传递的数组进行排序。

    作为一种选择 - 只需从“旧”但排序的数组中创建一个“不同”的数组。

    const sortHandler = (name: any, idx: number): void => {
    switch (name) {
            case EProductSort.popular: // популярности
                setProducts([...products]);
                break;
            case EProductSort.price: // цене
                const sortProductsByPrice = products.sort((a: any, b: any) => {
                    return a.price - b.price;
                });
                setProducts([...sortProductsByPrice]);
                break;
            case EProductSort.alphabet: // алфавиту
                const sortProductsByAlphabet = products.sort((a: any, b: any) => {
                    if (a.name > b.name) return 1;
                    return 0;
                });
                setProducts([...sortProductsByAlphabet]);
                break;
            default:
                setProducts([...list]);
                break;
        }
    };

    • 1

相关问题