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作为字符串

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

3 个答案: