在ReactJS中更改某些内容后，状态不会重新呈现

Question

我正在编码一个具有产品列表的网站，我有一个选择，可以按照用户选择的选项对产品进行排序，但是更新后，列表不会以呈现的状态重新呈现。 / p>

 const sortProducts = useCallback(
    async option => {
        let sortedProducts = [...products];
        function sortByPopularity(product1: Product, product2: Product) {
            return product1.score > product2.score ? -1 : 1;
        }

        function sortByLowestPrice(product1: Product, product2: Product) {
            return product1.price > product2.price ? 1 : -1;
        }

        function sortByHighestPrice(product1: Product, product2: Product) {
            return product1.price > product2.price ? -1 : 1;
        }

        function sortByAlphabeticOrder(product1: Product, product2: Product) {
            const comparableProduct1 = product1.name.toLocaleUpperCase();
            const comparableProduct2 = product2.name.toLocaleUpperCase();
            return comparableProduct1 > comparableProduct2 ? 1 : -1;
        }

        if (option === 'Maior preço') {
            sortedProducts.sort(sortByHighestPrice)
        }
        else
            if (option === 'Menor preço') {
                sortedProducts.sort(sortByLowestPrice)

            }
            else
                if (option === 'Ordem alfabética') {
                    sortedProducts.sort(sortByAlphabeticOrder)
                } else {
                    sortedProducts.sort(sortByPopularity)
                }
                console.log(sortedProducts)
        setProducts(sortedProducts)
    }, [products]
)