如何在反应中对一组对象进行排序并渲染它们？答案

【问题标题】：How do I sort an array of objects in react and render them?如何在反应中对一组对象进行排序并渲染它们？
【发布时间】：2021-09-21 17:57:47
【问题描述】：

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

我将它们呈现在这样的表格中：

{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 函数期间进行？

【问题讨论】：

标签： arrays reactjs sorting state map-function

【解决方案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>
))}

【讨论】：

【解决方案2】：

在设置状态或渲染期间，您可以随心所欲地进行操作。

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

所以要按姓氏的字母顺序对它们进行排序，您可以使用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>
))}

【讨论】：

【解决方案3】：

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

【讨论】：