如何对反应中的对象数组进行排序并渲染它们？

Question

我有一个对象数组，其中包含 phone 本书的用户信息（name、lname、phone）。我无法按照我想要的顺序呈现它们，并且希望能够按姓氏排序呈现它们。我该怎么做？

我将它们呈现在 table 中，如下所示：

{persons.map((element, i) => (
   <tr key={i}>
      <td style={style.tableCell}>{ element.userFirstname }</td>
      <td style={style.tableCell}>{ element.userLastname }</td>
      <td style={style.tableCell}>{ element.userPhone }</td>
   </tr>
))}

为了向数组添加数据，我有一个表单，只要按下提交按钮，它就会将数据附加到数组。这就是我附加数据的方式：

const [persons, setPersons] = useState([
    { 
      userFirstname: "Coder", 
      userLastname: "Byte", 
      userPhone: "8885559999"
    }
  ])

  const [formData, setFormData] = useState({
    userFirstname: "",
    userLastname: "",
    userPhone: ""
  });

  const { userFirstname, userLastname, userPhone } = formData;

  const onChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  const onSubmit = (e) => {
    e.preventDefault();
    setPersons(persons.concat({ userFirstname: userFirstname, userLastname: userLastname, userPhone: userPhone }));
  }

我需要在 map 函数之前对数组进行排序还是可以在 map 函数期间进行？

Answer 1

你可以这样做：

您必须安装 lodash 库：npm i --save lodash

import {sortBy} from 'lodash';


{sortBy(persons, ['userLastname']).map((element, i) => (
   <tr key={i}>
      <td style={style.tableCell}>{ element.userFirstname }</td>
      <td style={style.tableCell}>{ element.userLastname }</td>
      <td style={style.tableCell}>{ element.userPhone }</td>
   </tr>
))}

Answer 2

你可以在任何你想做的地方做，在状态设置期间或在渲染期间。

我会在地图中进行，即渲染为数组，因为它只是数据的混洗。这样我的原始状态列表按 'last modified' 排序，以后可能会派上用场。

因此，要按姓氏的字母顺序对它们进行排序，您可以使用 sort 方法。

{persons.sort((a,b) => a.userLastname.localeCompare(b.userLastname))).map((element, i) => (
 <tr key={i}>
    <td style={style.tableCell}>{ element.userFirstname }</td>
    <td style={style.tableCell}>{ element.userLastname }</td>
    <td style={style.tableCell}>{ element.userPhone }</td>
 </tr>
))}

Answer 3

我建议您在设置状态之前对数组进行排序，否则在每次渲染时它都会尝试在显示之前对其进行排序。

如何对反应中的对象数组进行排序并渲染它们？

How do I sort an array of objects in react and render them?

arrays

reactjs

sorting

state

map-function