Reactjs 如何在React应用程序中对Firebase数据进行重新排序/排序？

因此，我在这里只能凭直觉行事，我需要帮助对数据集进行重新排序。这是我的react组件的基础。这是一个个人项目，我正在做，然后在实际项目中重复使用。其基础来自YouTube上一个关于React+Firebase的系列节目：

理想情况下，我希望有一组按钮可以对asc或desc中的数据进行排序，并且可能依赖于其他一些东西

import React, { Component } from 'react';
import ShopList from '../shops/ShopList.js';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';


class Dashboard extends Component {
  reOrder = (e) => {
    e.preventDefault();
    console.log("button works!");
  }

  render() {
    const { shops } = this.props;

    return(

      <div className="dashboard container">
      <Helmet>
          <title>Dashboard | Indianapolis Coffee Guide</title>
      </Helmet>
        <div className="row">
            <div className="col-sm-6">
              <button className="btn btn-primary" onClick={this.reOrder}>Reorder</button>
            </div>
        </div>
        <div className="row">
            <ShopList shops={shops} />
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    shops: state.firestore.ordered.coffeeShops,
    auth: state.firebase.auth
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'coffeeShops', orderBy: ['shopName', 'asc']}
  ])
)(Dashboard)

import React，{Component}来自'React'；
从“../shops/ShopList.js”导入购物清单；
从“react Helmet”导入{Helmet}；
从'react redux'导入{connect}；
从“react-redux firebase”导入{firestoreConnect}；
从'redux'导入{compose}；
类仪表板扩展组件{
重新排序=（e）=>{
e、 预防默认值（）；
log（“按钮工作！”）；
}
render（）{
const{shops}=this.props；
返回(
仪表板|印第安纳波利斯咖啡指南
重新排序
)
}
}
常量mapStateToProps=（状态）=>{
返回{
商店：state.firestore.ordered.coffeeShops，
auth:state.firebase.auth
}
}
导出默认组合(
连接（MapStateTops），
firestoreConnect([
{收藏：'coffeeShops'，订购人：['shopName'，'asc']}
])
)（仪表板）

数据正在使用orderBy进行排序，但我需要能够更新该数据

---

谢谢你的帮助

我不确定它是否有效，因为我从未使用过

react redux firebase

，但在我看来，您可以创建一个redux操作，在redux商店中设置订购方向。像这样：

import React, { Component } from 'react';
import ShopList from '../shops/ShopList.js';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';


class Dashboard extends Component {
  reOrder = (e) => {
    e.preventDefault();
    console.log("button works!");
    const orderDirection = this.props.orderDirection === 'asc' ? 'desc' : 'asc';
    this.props.dispatch(ReOderAction(orderDirection));
  }

  render() {
    const { shops } = this.props;

    return(

      <div className="dashboard container">
      <Helmet>
          <title>Dashboard | Indianapolis Coffee Guide</title>
      </Helmet>
        <div className="row">
            <div className="col-sm-6">
              <button className="btn btn-primary" onClick={this.reOrder}>Reorder</button>
            </div>
        </div>
        <div className="row">
            <ShopList shops={shops} />
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    shops: state.firestore.ordered.coffeeShops,
    auth: state.firebase.auth,
    orderDirection: state.anything.orderDirection,
  }
}

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'coffeeShops', orderBy: ['shopName', orderDirection]}
  ])
)(Dashboard)

import React，{Component}来自'React'；
从“../shops/ShopList.js”导入购物清单；
从“react Helmet”导入{Helmet}；
从'react redux'导入{connect}；
从“react-redux firebase”导入{firestoreConnect}；
从'redux'导入{compose}；
类仪表板扩展组件{
重新排序=（e）=>{
e、 预防默认值（）；
log（“按钮工作！”）；
const orderDirection=this.props.orderDirection=='asc'？'desc'：'asc'；
此.props.dispatch（再减额（订单方向））；
}
render（）{
const{shops}=this.props；
返回(
仪表板|印第安纳波利斯咖啡指南
重新排序
)
}
}
常量mapStateToProps=（状态）=>{
返回{
商店：state.firestore.ordered.coffeeShops，
auth:state.firebase.auth，
orderDirection:state.anything.orderDirection，
}
}
导出默认组合(
连接（MapStateTops），
firestoreConnect([
{集合：'coffeeShops'，订购人：['shopName'，orderDirection]}
])
)（仪表板）

---

请告诉我它是否有效…

因此我将您的常量更改为let并运行，但它不会更新显示的数据。我在点击按钮后记录了orderDirection，它改变了应该有的值，但数据本身没有更新。有什么想法吗？而且，就像我说的，我只是按照那个教程。所以，如果你知道另一种方法（re：更好的方法），你会得到数据，我也很乐意尝试一下。非常感谢。是的，我刚刚更新了我的答案。您可以在父组件上传递一个

prop

（比方说

orderDirection

）并更改父组件的状态，或者您可以创建一个专门用于设置此属性的redux操作。像这样，你的组件肯定会更新。它不会生成，因为没有定义重新降额？是的，我知道。正如我所说，您需要创建一个Redux操作。。。你知道怎么做吗？如果您不这样做，为什么不尝试将道具从父组件传递到组件？也许，在这种情况下，您不应该尝试使用redux。你必须写一点样板，这可能有点乏味。但是如果你真的想使用它，那就考虑看一些教程。一个良好的开端是：