如何解决JS对象数组按rate降序后按标题字母序排序失效问题

数据老陈

2026-9-25

问题根因

Array.sort() 是原地排序方法，会直接修改原数组，你先后执行两次独立排序，第二次按标题排序的逻辑会直接覆盖第一次按评分排序的结果，相当于最终仅按标题做了排序，完全没有保留评分排序的优先级。
你最终渲染遍历的是第一次排序后的sorted变量，而非二次排序得到的newSorted变量，就算第二次排序逻辑正确也不会生效。

解决方案

把两个排序规则合并到同一个sort回调中，优先判断评分，评分不同时按评分降序排列，评分相同时再按标题字母升序排列，修正后代码如下：

const Reviews = ({ books, initialData }) => {
  const combinedBooks = initialData.concat(books);

  // 合并排序逻辑：先按评分降序，评分相同按标题字母升序
  const sortedBooks = combinedBooks.sort((a, b) => {
    // 评分不同时优先按评分降序排列
    if (a.score !== b.score) {
      return b.score - a.score;
    }
    // 评分一致时按标题小写后的字母序升序排列
    const titleA = a.title.toLowerCase();
    const titleB = b.title.toLowerCase();
    return titleA.localeCompare(titleB);
  });

  return (
    <section style={{ border: "3px solid green" }}>
      <Header title="Book Review Lists" />
      {/* 遍历排序后的正确数组 */}
      {sortedBooks.map((review) => {
        const { id, title, comment, score } = review;
        return (
          <Review key={id} title={title} comment={comment} score={score} />
        );
      })}
    </section>
  );
};

export default Reviews;