在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功能是一种方法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>
    );
 }

这有帮助吗？