如何在 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}/>);

原文由 YVH 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 函数 是—的一个方法 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>
    );
 }

这有帮助吗？

原文由 Adeel Imran 发布，翻译遵循 CC BY-SA 3.0 许可协议