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

Question

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

firebase 中的对象如下所示:

L1NSTjqA10Qc85d7Kcc
- 姓名:John Doe，
- 地址: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>
    );
 }

这有帮助吗？