无法对 fetch 返回的对象进行排序[重复]答案

【问题标题】：Cannot sort an object which fetch returns [duplicate]无法对 fetch 返回的对象进行排序[重复]
【发布时间】：2021-06-05 12:01:35
【问题描述】：

我无法在 React 中对数组进行排序。我正在获取这样的数据：

function AllMeetupsPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [loadedMeetups, setLoadedMeetups] = useState([]);

  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);
        }

        setIsLoading(false);
        setLoadedMeetups(meetups);
      });
  }, []);

然后我想渲染它。在这里，我试图对加载的Meetups 进行排序，我尝试了几种不同的东西，但它不起作用。 F.e 简单的 loadedMeetups.reverse() 工作正常。

return (
    <section>
      <h1>All Meetups</h1>
      <MeetupList meetups={loadedMeetups.sort(
        (a, b) => b['title'] - a['title']
      )} />   {/* Here im trying to sort loadedMeetups, i tried several diffrent thing but it don't work.
       F.e simple loadedMeetups.reverse() works fine.*/}
      <button onClick={handleClick}></button>
    </section>
  );
}

它不起作用。

这是浏览器中的对象console.log

0:
author: "Lewis Carroll"
description: "Alicja w Krainie Czarów to powieść napisana przez Carroll'a"
genre: "Powieść"
id: "-MbN_UVuJJvfCjonq6E1"
image_url: "https://cdn.bonito.pl/zdjecia/7/8723-alicja-w-krainie-czarow.jpg"
release_date: " 2000-12-31"
title: "Alicja w Krainie Czarów"
__proto__: Object
1:
author: "J.K Rowling "
description: "Książka o czarodzieju"
genre: "Fantastyka"
id: "-MbNbGx4MlJY5VafwuzN"
image_url: "https://cdn-lubimyczytac.pl/upload/books/308000/308630/494238-352x500.jpg"
release_date: "2002-08-20"
title: "Harry Potte

我知道问题出在获取数据的某个地方，因为我试图在我自己创建的一些 dummy_data 数组上对其进行排序并且它有效。但是我对 fetch 不是很熟悉，目前也不是很了解，我只是用它来连接 api。

【问题讨论】：

标签： reactjs

【解决方案1】：

如果要按标题对项目进行排序，可以使用localeCompare

const books = [{
    author: "Lewis Carroll",
    description: "Alicja w Krainie Czarów to powieść napisana przez Carroll'a",
    genre: "Powieść",
    id: "-MbN_UVuJJvfCjonq6E1",
    image_url: "https://cdn.bonito.pl/zdjecia/7/8723-alicja-w-krainie-czarow.jpg",
    release_date: " 2000-12-31",
    title: "Alicja w Krainie Czarów",
  },
  {
    author: "J.K Rowling ",
    description: "Książka o czarodzieju",
    genre: "Fantastyka",
    id: "-MbNbGx4MlJY5VafwuzN",
    image_url: "https://cdn-lubimyczytac.pl/upload/books/308000/308630/494238-352x500.jpg",
    release_date: "2002-08-20",
    title: "Harry Potte",
  },
  {
    author: "J.K Rowling ",
    description: "Książka o czarodzieju",
    genre: "Fantastyka",
    id: "-MbNbGx4MlJY5VafwuzN",
    image_url: "https://cdn-lubimyczytac.pl/upload/books/308000/308630/494238-352x500.jpg",
    release_date: "2002-08-20",
    title: "Barry Potte",
  }
]

const sorted = books.sort((a,b) => a.title.localeCompare(b.title));

console.log(sorted);

另外，如果您的数据以数组的形式出现，则不需要转换，您只需将状态设置为 response（除非您想更改可能是这种情况的数据）。

useEffect(() => {
  setIsLoading(true);
  fetch("https://reacttesty-2fbdf-default-rtdb.firebaseio.com/api/book.json")
    .then((response) => response.json())
    .then((data) => {
      setIsLoading(false);
      setLoadedMeetups(data);
    });
}, []);

【讨论】：

【解决方案2】：

试试这个。

API 响应实际上是嵌套在一个对象中的两个对象。

{
   {},
   {}
}

因此，您需要提取键并映射以将对象放入数组中。然后进行排序。

我会在 useEffect 钩子中执行排序，这样排序就不会在每次重新渲染时发生（当前在给定代码中发生）。

  const [isLoading, setIsLoading] = useState(false);
  const [loadedMeetups, setLoadedMeetups] = useState([]);

  useEffect(() => {
    setIsLoading(true);

    fetch("https://reacttesty-2fbdf-default-rtdb.firebaseio.com/api/book.json")
      .then((res) => res.json())
      .then((data) => {
        const meetings = Object.keys(data)
          .map((key) => data[key])
          .sort((a, b) => a.author.localeCompare(b.author));
        setLoadedMeetups(meetings);
        setIsLoading(false);
      });
  }, []);

  return (
    <section>
      <h1>All Meetups</h1>
      {!isLoading && loadedMeetups.length > 0 && (
        <ul>
          {loadedMeetups.map((meetup) => (
            <li key={meetup.description}>
              {meetup.author} - {meetup.description}
            </li>
          ))}
        </ul>
      )}
    </section>
  );

【讨论】：