javascript - 对组件列表进行 react 排序

Question

我正在尝试更新 make，当单击按钮时，将执行函数 sortCategories 并对 CategoryRow 组件列表进行排序，但没有任何变化，并且有控制台上没有错误

import React, { useEffect, useState} from 'react';
import './category.css';
import Header from "../Header";
import CategoryRow from "./CategoryRow";


// Clean empty categories
const filtered = window.CATEGORIES.filter(function(value, index, arr) {
    return value.labResults.length > 0;
});



export default function Category() {

    const [categories, setCategories] = useState(filtered)
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        setLoading(false)
    }, []);

    const sortCategories = () => {
        // Order by issues
        categories.sort((a,b) => {
            return b.issues - a.issues;
        });
        setCategories(categories);
    }

    return (
        <>
            <Header></Header>
            <div className="order-button-row">
                <button className="btn btn-primary" onClick={ sortCategories }>Order by issues</button>
            </div>
            <div className="card shadow py-2 mb-2">
                <div className="card-body">
                    {loading ? (
                        <div className={'text-center'}>
                            <span className="fa fa-spin fa-spinner fa-4x"></span>
                        </div>

                    ) : (
                        <div className={'row'}>
                            {categories.map(categoryInformation =>
                                <CategoryRow key={categoryInformation.category.id}
                                             category={categoryInformation.category}
                                             issues={categoryInformation.issues}></CategoryRow>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </>
    )
}

Answer 1

问题

在你的代码中 categories.sort 进行就地排序，当你执行 setCategories(categories) 时，React 会简单地忽略它，因为它与之前的数组引用相同(没有引用变化)。

categories.sort((a,b) => {
  return b.issues - a.issues;
});
setCategories(categories);

解决方案1

制作类别的副本，然后排序并更新状态:

const categoriesCopy = [...categories];
categoriesCopy.sort((a,b) => {
    return b.issues - a.issues;
});
setCategories(categoriesCopy);

解决方案2

使用setter函数的回调函数:

setCategories(prevCategories => {
  const categoriesCopy = [...prevCategories];
  categoriesCopy.sort((a, b) => {
    return b.issues - a.issues;
  });
  return categoriesCopy;
});