React组件中map遍历后按place.name实现字母排序的方法

直接把sort方法接在map末尾的写法完全没法实现你要的字母排序效果，核心原因有两点：

• map方法跑完之后返回的是已经渲染好的JSX元素数组，不是存着餐厅原始数据的对象集合，这时候调用sort根本拿不到每个条目对应的place.name字段，没法按业务规则排序
• 原生数组的sort是原地修改的方法：要是直接对传进来的props nearbyRestaurants调用sort，会直接改动父组件传过来的原始数据，破坏React单向数据流的规则，很容易导致父组件里依赖这个数据的其他逻辑出bug

正确的实现思路 #

执行顺序得调整对：先拷贝一份原始的餐厅数组（绝对不能改原props的引用） -> 对拷贝出来的新数组按place.name做字母序排序 -> 再对排好序的数组执行map渲染列表项。
排序的时候推荐用字符串自带的localeCompare做比较，比直接拿ASCII码比大小靠谱，能正确处理带特殊符号、多语言的名称排序，不会出现比如带重音的法语名字排到Z后面的错位问题。

调整后的完整组件代码：

export default function RestaurantList({nearbyRestaurants}) {
  // 加个兜底，避免nearbyRestaurants为null/undefined时调用map报错
  const safeRestaurants = nearbyRestaurants ?? []
  return (
    <div>
      <ul>
        <li className="list-header">Restaurants</li>
        {safeRestaurants
          // 用slice生成原数组的浅拷贝，绝不碰原props
          .slice()
          // 按餐厅名称字母序排序
          .sort((a, b) => a.name.localeCompare(b.name))
          // 遍历渲染每个列表项
          .map((place) => (
            <div>
              <li>
                <div>{place.name}</div>
                <div>{place.vicinity}</div>
              </li>
            </div>
          ))
        }
      </ul>
    </div>
  );
}

实用小提示：如果以后列表条目变多，每次组件重渲染都重新拷贝、排序会有额外性能开销，这时候可以用useMemo把排序后的列表缓存起来，减少重复计算。

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