javascript - 从 URL 到排序数组的 JSON ReactJS

Question

我有一个存储一些数据的 URL，例如

[
   {"id":1,"first_name":"add","last_name":"add"},
   {"id":2,"first_name":"sfdf","last_name":"aad"}
]

等等。 我想按姓氏对其进行排序，并在 React 功能组件中显示已排序的数组。 我怎样才能实现这个目标？

UPD。我在将数据从 url 转换为可访问的 js 数组时遇到问题，而不是对其进行排序

这就是我从 URL 获取数据的方式

function App() {
  const [contacts, setContacts] = useState([]);

  const fetchContactsList = async() => {
    try {
      let response = await fetch(URL)
      let contacts = await response.json()
      setContacts(contacts)
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    fetchContactsList()
  }, [])


  return (
    <main>
      <Container>
        <Header />
        <Search />
        <ContactsList contacts={contacts} />
      </Container>
    </main>
  );
}

Answer 1

编辑:

• 编辑答案以更好地反射(reflect)问题中 OP 的澄清
• 更新了排序函数以使用 localeCompare

我认为您正在寻找的是这样的:

function App() {
  const [contacts, setContacts] = useState([]);

  const fetchContactsList = async() => {
    try {
      let response = await fetch(URL)
      let contacts = await response.json()
      setContacts(contacts)
    } catch (error) {
      console.log(error)
    }
  }
  useEffect(() => {
    fetchContactsList()
  }, [])

  const sortedContacts = useMemo(() => {
    if (!contacts) return;

    return contacts.sort((a,b) => a.last_name.localeCompare(b.last_name));
  }, [contacts]);

  return (
    <main>
      <Container>
        <Header />
        <Search />
        <ContactsList contacts={sortedContacts} />
      </Container>
    </main>
  );
}