如何在 React.js 中按字母顺序对数组中的对象进行排序

Question

我正在使用 React.js 和 firebase 制作一个应用程序，用户可以在其中输入姓名和人的地址。

firebase 中的对象如下所示：

L1NSTjqA10Qc85d7Kcc - name: John Doe, - address: 1 Maple Ave

我已成功将名称和地址打印到 DOM 上，但我想按名称的字母顺序对其进行排序。

所以我的列表将如下所示：

Jane Doe - 34 Green Street
John Doe - 1 Maple Ave
Riley Smith - 3 Happy Street

到目前为止，这是我的 JSX，用于在父组件上映射对象数组时：

<ul>
  {this.state.contacts.map((res)=> <List data={res}/>)}
</ul>

以防万一，这是我的 componentDidMount：

componentDidMount() {
  const dbRef = firebase.database().ref();

  dbRef.on("value", (firebaseData) => {
    const itemsArray = [];
    const itemsData = firebaseData.val();
    for (let itemKey in itemsData) {
      itemsArray.push(itemsData[itemKey])
    }
    this.setState({ contacts: itemsArray})
  })
}

我曾尝试从另一个堆栈溢出论坛执行以下操作，但没有成功：

const myData = [].concat(this.state.contacts)
  .sort((a,b)=> a.name > b.name
  .map((res)=> <List data={res}/>);

Answer 1

您尝试排序然后映射的逻辑部分可以这样完成。

const myData = this.state.contacts
 .sort(function(a, b) {
  if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
  if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
  return 0;
 })
 .map((item, i) => <List key={i} data={item} />);

或者如果你想做得更短，你可以这样做。

const myData = this.state.contacts
 .sort((a, b) => a.name.localeCompare(b.name))
 .map((item, i) => <List key={i} data={item} />);

localeCompare function是String的方法

在你调用的方法中

dbRef.on("value", (firebaseData) => {
  this.setState({ 
      contacts: Array.from(firebaseData.val()).sort((a, b) => a.name.localeCompare(b.name))})
  });
}

在您的 render 方法中执行以下操作

 render () {
    return (
      <ul>
       {
        this.state.contacts.map((item, i) => <List key={i} data={item} />)
       }
      </ul>
    );
 }

这有帮助吗？

Answer 2

不要不要在渲染方法中对数据进行排序！它会在每次渲染调用时对其进行排序。

要记住的另一件事是sort 正在执行manipulation on the array and not returning a new copy of the array。 来自文档：

注意数组是原地排序的，不做拷贝

这意味着你将改变 state 对象，这是一个很大的反应。
这就是您使用[].concat(this.state.contacts) 创建新数组的原因。 你可以用ES2015 spread syntax实现一个新数组：

const newArray = [...this.state.contacts];

无论如何，不​​要处理状态的副本和突变，而是在将数组存储到状态之前进行排序：

itemsArray.sort((a,b) => {
    return a.name > b.name;
});
this.setState({
    contacts: itemsArray
})

Answer 3

非常简单的解决方案，只需 2 个函数即可对多列应用排序。

不需要 toLowerCase ，只需使用 "" 转换成字符串

只需创建这两个函数

compareBy(key) {
return function (a, b) {
  if (""+a[key]<(""+b[key])) return -1;
  if (""+a[key]>(""+b[key])) return 1;
  return 0;
};}

sortBy(key) {
let arrayCopy = [...this.state.data];
arrayCopy.sort(this.compareBy(key));
//arrayCopy.reverse(); for descending
this.setState({data: arrayCopy});
} 

//write this in th
onClick={() => this.sortBy('column name')}

如果你想降序使用它是升序排序 arrayCopy.reverse()

它根据 ASCII 格式排序，所以字符串使用 toLowerCase

Answer 4

.sort((a, b) => parseFloat(a.sort) - parseFloat(b.sort))