reactjs - 按集合名称返回的 Firebase 数据排序

Question

如果有人问过这个问题，我很抱歉，但我发现了很多关于按字段内容排序的问题。我想按字段名称排序。我试过 orderBy、orderByChild 和 startAt - 都没有用。

我的收藏看起来像这样:

我希望我的数据始终以“全部”开头，之后的顺序无关紧要。以下是我获取数据的方式:

 const fetchProjects = async() => {
      const catRef = doc(db, 'Portfolio', 'Category')
      const catSnap = await getDoc(catRef)

      if(catSnap.exists()) {
          setCategory(catSnap.data())
      }
}

然后我创建按钮来选择某些数据字段，如下所示:

       const sortButton = (key) => {
      if(filter === key) {
        return (<div key={key}>
          <button className='prt-act-btn' >{key}</button>
          </div>)
      } else {
        return ( <div key={key}>
            <button className='prt-btn' onClick={() => setFilter(`${key}`)}>{key}</button>
            </div> )}
    }
    
    if(loading || fetching) {
      return <p>loading...</p>
    }
    
      return (
        <>
           <p className="pageHeader"> <FaFileArchive/> &nbsp; Portfolio</p>
           <div className='center'>
           {Object.keys(category).map((key) => (
            sortButton(key) 
           ))}
           </div>
}

所以本质上，问题是我的按钮在每次重新加载后按顺序随机排列，我想从“全部”开始，然后列出其他类别，如“API”、“区 block 链”、“数据库”等。

感谢您的帮助!

Answer 1

Javascript 对象不适用于有序数据。对象在技术上确实有其 key 的顺序，但您几乎没有能力控制该顺序并且不应该依赖它。因此，当您执行 Object.keys(/* some object */) 时，您应该在心理上将其视为以随机顺序获取 key 。您碰巧是从 firestore 文档中获取此对象，但任何对象都会发生同样的事情。

如果您想要将 key 按顺序排列，您可以这样做，但您需要添加代码才能这样做。 .sort function可以帮忙解决这个问题。例如，如果您想将“全部”放在首位，然后按字母顺序排列其余部分，您可以这样做:

{Object.keys(category)
  .sort((a, b) => {
    if (a === 'All') {
      return -1;
    } else if (b === 'All') {
      return 1;
    } else {
      return a.localeCompare(b);
    }
  })
  .map(key => sortButton(key))
}