React中点击按钮执行sortCategories排序CategoryRow列表无反应且无报错

你使用的Array.sort()是原地修改数组的方法，调用它之后原数组的引用并没有改变。当你执行setCategories(categories)时，传入的数组和当前状态的引用完全一致，React会因为检测不到状态变化而不触发组件重渲染，所以页面没有任何更新。

修改sortCategories函数，先复制原数组得到新的引用，再对新数组排序后更新状态：

const sortCategories = () => {
    // 展开原数组生成新数组，避免原地修改
    const sortedCategories = [...categories].sort((a,b) => {
        return b.issues - a.issues;
    });
    setCategories(sortedCategories);
}

也可以用slice()方法复制数组：

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

React的状态更新依赖引用变化判断是否需要重渲染。原地修改数组不会改变数组的引用，React会认为状态没有发生变化，因此不会重新渲染组件。通过复制数组生成新的引用，再排序后更新状态，React就能检测到状态变更，触发组件重渲染，页面就会展示排序后的结果。

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