React中更新state后映射变量未重新渲染的问题求助

我定义了常量displayUniversities，通过遍历状态数组universitiesToDisplay返回待渲染的组件列表：

const displayUniversities = universitiesToDisplay.map(
    (item: UniversityModel) => {
        return (
            <UniversityCard university={item} key={item['Institution']['S']} />
        );
    }
);

其中universitiesToDisplay是通过setState管理的状态数组，我希望用户在下拉组件选择选项时更新它：

<UniversitySorting handleSort={handleSort} />

handleSort函数接收下拉事件，调用排序函数更新列表（为简化直接按升序处理）：

const handleSort = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setUniversitiesToDisplay(
        sortUniversities(universitiesToDisplay, 'ascending')
    );
};

更新后控制台打印的universitiesToDisplay是正确排序的数组，但displayUniversities的映射结果从未重渲染。我另有搜索功能用相同方式更新列表却能正常重渲染，页面仅通过<div>{displayUniversities}</div>展示，请问问题出在哪里？

核心问题出在排序函数直接修改了原数组，导致React无法检测到状态变化。

React的状态更新依赖于引用变化：如果sortUniversities是直接对传入的universitiesToDisplay数组进行原地排序（比如使用数组原生sort()方法），返回的数组和原数组是同一个引用。此时调用setUniversitiesToDisplay传入同一个引用，React会判定状态未发生变化，因此不会触发组件重渲染。

而搜索功能能正常工作，大概率是因为搜索逻辑使用了filter()这类会返回新数组的方法，数组引用发生了变化，所以能触发重渲染。

解决方法： #

1. 修改排序函数返回新数组
   确保sortUniversities先创建原数组的拷贝，再对拷贝后的数组排序，避免修改原数组：

function sortUniversities(arr: UniversityModel[], order: 'ascending' | 'descending') {
    // 浅拷贝原数组
    const copiedArr = [...arr];
    // 执行排序逻辑
    copiedArr.sort((a, b) => {
        const nameA = a['Institution']['S'].toLowerCase();
        const nameB = b['Institution']['S'].toLowerCase();
        return order === 'ascending' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
    });
    return copiedArr;
}

2. 调用时手动拷贝数组
   如果不想修改排序函数，可以在调用setUniversitiesToDisplay时先拷贝原数组：

const handleSort = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setUniversitiesToDisplay(
        sortUniversities([...universitiesToDisplay], 'ascending')
    );
};

3. 使用函数式更新优化
   使用函数式更新可以避免依赖当前状态快照的问题，在并发模式下更安全：

const handleSort = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setUniversitiesToDisplay(prevState => {
        return sortUniversities([...prevState], 'ascending');
    });
};

通过以上方式，每次状态更新都会生成新的数组引用，React能检测到状态变化并触发重渲染，displayUniversities的映射结果也会随之更新。

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