Javascript 在React中对状态对象进行排序

我正在尝试创建一种方法来单击我的表标题（“名字”、“姓氏”等），并相应地对数据进行排序

        <Container>
        <table className="table table-hover">
        <thead>
            <tr>
            <th scope="col" >Image</th>
            <th scope="col" value="firstName" onClick={this.sortFirstName}>First Name</th>
            <th scope="col" value="lastName">Last Lame</th>
            <th scope="col" value="email">Email</th>
            <th scope="col" value="phoneNumber">Phone Number</th>
            <th scope="col" value="city">City</th>
            <th scope="col" value="SSN">SSN</th>
            </tr>
        </thead>
        <tbody>
        {this.state.filteredEmployeeData.map(ee => (
          <EmployeeData
            id={ee.login.uuid}
            key={ee.login.uuid}
            img={ee.picture.thumbnail}
            firstName={ee.name.first}
            lastName={ee.name.last}
            email={ee.email}
            phone={ee.cell}
            city={ee.location.city}
            ssn={ee.id.value}
          />
        ))}
        </tbody>
        </table>
        </Container>

形象
名字
最后的瘸子
电子邮件
电话号码
城市
SSN
{this.state.filteredEmployeeData.map（ee=>(
))}

您可以在第一个名称上看到，我正在尝试创建一个onClick函数，该函数允许我根据第一个名称对数据进行排序

下面是我如何创建函数的示例：

  sortEmail(){
    console.log('SORTING!!!!')
    const {filteredEmployeeData} = this.state
    const sorted = filteredEmployeeData.sort((a, b) => {
          if (a.email < b.email){
            return -1
        } else if (a.email > b.email){
            return 1
        } else {
          return 0
        }
    })
    console.log('Sorted List: ', sorted)
    this.setState({filteredEmployeeData: sorted})
}

sortedmail（）{
console.log（'SORTING！！！！'）
const{filteredEmployeeData}=this.state
const sorted=filteredEmployeeData.sort（（a，b）=>{
如果（a.电子邮件b.电子邮件）{
返回1
}否则{
返回0
}
})
console.log（'已排序列表：'，已排序）
this.setState（{filteredEmployeeData:sorted}）
}

---

感谢您的帮助

我假设您的数据是一个对象数组，其属性作为道具在组件中传递，您应该使用

因为您是按字母顺序排序的，而这是一个对象数组，所以应该创建一个函数，该函数根据对象的属性按字母顺序排序。它应该是这样的：

函数字母排序（a、b、属性）{
常量x=a[property].toLowerCase（）；
常量y=b[property].toLowerCase（）；
返回x.localeCompare（y）；
}

我喜欢用在这些情况下，因为它考虑到口音和任何其他特殊字符

以下是您大致想要的演示：

const exampleData=[
{firstName:'Mat'，lastName:'Smith'}，
{姓：“卡罗尔”，姓“詹姆逊”}，
{姓：“艾伯特”，姓：“辛普森”}，
{姓：'休伯特'，姓：'休斯'}，
]
函数字母排序（a、b、属性）{
常量x=a[property].toLowerCase（）；
常量y=b[property].toLowerCase（）；
返回x.localeCompare（y）；
}
常量应用=（）=>{
const[data，setData]=React.useState（exampleData）
常量排序=（属性）=>{
const sorted=data.sort（（a，b）=>字母排序（a，b，属性））
控制台。警告（已排序）
setData（[…已排序]）
}
返回(
排序（'firstName'）}>First Name
排序（'lastName'）}>lastName
{data.map（（d）=>(
{d.firstName}
{d.lastName}
))}
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);

请出示一张照片。这里没有足够的上下文来真正有效地提供帮助。您的状态是什么样子的？有很多非常好的表排序库可供react使用。你考虑过使用其中一种吗？另外，您可能会获得否决票，因为您的问题看起来像“请为我实现表排序”
。sort
会修改参数，而修改state是不正确的<代码>[…数据].sort

或

数据.slice（）.sort（）

会更好。