React项目中如何为.map渲染的用户列表实现按LastName排序功能

实现按LastName排序的两种方案 #

方案1：提交新用户时直接排序存入状态（推荐，只在新增时排序一次，性能更好）

你只需要修改PhoneBookForm组件中的handleSubmit提交逻辑，在更新user状态前对新的用户数组先做浅拷贝再排序即可，避免直接修改原数组触发异常：

function handleSubmit(e){
  console.log(user)
  e.preventDefault();
  // 先拼接新用户，再做浅拷贝，再按lastName排序
  const newUserList = [...user, {...input}].sort((a, b) => {
    // 使用localeCompare支持中英文、特殊字符的自然排序，纯英文场景可将第二个参数改为'en'
    return a.lastName.localeCompare(b.lastName, 'zh-CN');
  });
  setUser(newUserList);
  setInput({
    ...input,
    firstName:'',
    lastName:'',
    phone:''
  })
}

方案2：渲染时再排序（适合需要灵活切换排序规则的场景）

不需要修改父组件逻辑，直接在InformationTable组件中对传入的user数组做拷贝排序后再遍历渲染即可，同时下面的代码也优化了原组件每个用户单独渲染一个完整表格的不合理结构：

export default function InformationTable({user}) {
  // 先拷贝再排序，不修改原状态数组
  const sortedUser = user ? [...user].sort((a, b) => a.lastName.localeCompare(b.lastName, 'zh-CN')) : [];
  return (      
    <div>
      <table style={style.table} className='informationTable'>
        <thead> 
          <tr>
            <th style={style.tableCell}>First Name</th>
            <th style={style.tableCell}>Last Name</th>
            <th style={style.tableCell}>Phone</th>
          </tr>
        </thead>
        <tbody>
          {sortedUser.map((u)=>(
            <tr key={u.phone}>
              <td style={style.tableCell}>{u.firstName}</td>
              <td style={style.tableCell}>{u.lastName}</td>
              <td style={style.tableCell}>{u.phone}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Martin Gonzalez