React中fetch返回的对象数组按title字段排序失败如何解决？

核心问题说明 #

• 排序逻辑不匹配字段类型：你当前使用的(a, b) => b['title'] - a['title']写法仅适用于数值类型字段排序，title是字符串类型，字符串做减法运算会返回NaN，等于排序逻辑完全失效，这是排序不生效的核心原因。你本地模拟数据能生效，大概率是你模拟时排序的是数值字段，和fetch拉取数据环节没有关系。
• 直接修改state原数组：Array.sort()属于原地修改方法，直接对state中的loadedMeetups调用sort属于违规修改React state的操作，容易引发渲染异常。reverse()能生效是因为该方法仅做数组倒转，不需要依赖比较函数的返回值。

修复方案 #

方案1：渲染时排序（适用于排序规则动态变化的场景） #

先对原数组做浅拷贝，再使用字符串专用的localeCompare方法实现排序，不会修改原state：

return (
    <section>
      <h1>All Meetups</h1>
      <MeetupList meetups={[...loadedMeetups].sort(
        // 降序排序，要升序则调换a、b位置即可
        (a, b) => b.title.localeCompare(a.title)
      )} />
      <button onClick={handleClick}></button>
    </section>
);

localeCompare方法天然支持多语言字符排序，你示例中的波兰语特殊字符也可以得到正确的排序结果。

方案2：拉取数据时预排序（适用于排序规则固定的场景，性能更好） #

可以在fetch拿到数据处理完成后，直接排序再存入state，避免每次渲染都重复执行排序逻辑：

useEffect(() => {
  setIsLoading(true);
  fetch("https://reacttesty-2fbdf-default-rtdb.firebaseio.com/api/book.json")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      const meetups = [];
      for (const key in data) {
        const meetup = {
          id: key,
          ...data[key],
        };
        meetups.push(meetup);
      }
      // 预排序后再存入state
      const sortedMeetups = meetups.sort((a, b) => b.title.localeCompare(a.title))
      setIsLoading(false);
      setLoadedMeetups(sortedMeetups);
    });
}, []);

后续渲染直接传入loadedMeetups即可：

<MeetupList meetups={loadedMeetups} />

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