从 URL 到排序数组 ReactJS 的 JSON

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

编辑：

• 编辑答案以更好地反映问题中的 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>
  );
}

Answer 2

你可以使用 .sort()

function sorting(){
    var array = [{last_name:'z'},{last_name:'s'}]

    var array2 = ['a','s','d']

    return array.sort(dynamicSort("last_name"));
}

function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}
 
console.log (sorting())

享受

Answer 3

这一行是一个答案

contacts.sort( (a,b) => a.last_name.localeCompare(b.last_name))


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

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


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