请对键和值的映射进行排序以使用 Lodash（保留 Firebase 键：UID）在 ES6 中订购列表？答案

【问题标题】：Sorting a map of keys and values please to order a list in ES6 with Lodash (Keeping Firebase Key: UID)?请对键和值的映射进行排序以使用 Lodash（保留 Firebase 键：UID）在 ES6 中订购列表？
【发布时间】：2017-08-24 01:14:36
【问题描述】：

我目前正在尝试按姓名顺序对员工列表进行排序，但我在这样做时遇到了困难。

我正在使用 React-Native、ES6、Lodash 和 firebase。

Firebase 结构显示为：

state.employees 结构显示为：

{"-KgMYnBrqXCIPqjs0n7x":{"name":"James","phone":"123766","shift":"星期一"}, "-KgRiK6qiJsoZ_HBXt7K":{"name":"Nick"," phone":"123767","shift":"Tuesday"},"-KgRiM77VTOejvYPWPIp":{"name":"Henry","phone":"123","shift":"Thursday"},"-KgRiOaN14OeSjaYWb1O ":{"name":"Charlie","phone":"5643","shift":"Saturday"}}

并继续让更多员工拥有一个 UID，然后是姓名、电话和班次等属性。

虽然我可以使用 Lodash 提供的 _.orderBy 对列表进行排序，但在 _.map 之前应用时，似乎会删除作为 firebase 提供的键的 UID。

这是我目前有哪些订单，但 UID 已删除，_.map 工作正常，将 UID 与属性保持一致，但无序。

const mapStateToProps = state => {    
    const sortedEmployees = _.orderBy(
        state.employees, 
        [employee => employee.name.toLowerCase()]
    );
    const employees = _.map(sortedEmployees, (val, uid) => {
        return { ...val, uid };
    });

    return { employees };
};

非常感谢

【问题讨论】：

您能否用一些数据阐明 state.employees 结构的外观？是不是像[ { kgMYnBrqXCIPqjs0n7x: { name: 'James', phone: '123766', shift: 'Monday'} }, .... ]
感谢@agent_hunt，我已经在上面添加了 state.employees 的表示。

标签： firebase react-native firebase-realtime-database ecmascript-6 lodash

【解决方案1】：

_.orderBy(collection, [iteratees=[_.identity]], [orders])https://lodash.com/docs/4.17.4#orderBy

似乎当 lodash 映射对象类型的集合时，它忽略了它的键。一种解决方法是将对象集合从 firebase 响应转换为 array 。例如：

const arrWithKeys = Object.keys(state.employees).map((key) => {
    return {
      key,
      ...state.employees[key]
    }
});

然后使用

const sortedEmployees = _.orderBy(
        arrWithKeys, 
        [employee => employee.name.toLowerCase()]
    );

您还可以在 Firebase 查询中使用 Firebase 排序

https://firebase.google.com/docs/database/web/lists-of-data#sorting_and_filtering_data

【讨论】：

嗨，感谢您的回复@agent_hunt。我尝试按照建议实现它，它具有与 _.map 相同的结构，但它随后抱怨 TypeError: "Cannot convert undefined or null to object" 其中它既不是 null 也不是 undefined 并且实际上与原始 _.map 匹配，但这次订购。为了阻止它抱怨，我再次添加了 _.map 作为最后的想法，但这次使用 sortedEmployees 并返回 { ...val, uid} 并且它可以工作。无法让 firebase 查询接近，因为我必须通过不知道每个员工的密钥的孩子的孩子来订购。
这是我在您上面的 arrWithKeys 和 sortedEmployees 添加 _.map 作为事后思考后实现的工作const mapStateToProps = state => { const arrWithKeys = Object.keys(state.employees).map((uid) => { return { ...state.employees[uid], uid, }; }); const sortedEmployees = _.orderBy( arrWithKeys, [employee => employee.name.toLowerCase()], ); const employees = _.map(sortedEmployees, (val, uid) => { return { ...val, uid }; }); return { employees }; };

【解决方案2】：

感谢您的回复@agent_hunt。我尝试按照建议实现它，它具有与 _.map 相同的结构，但它随后抱怨 TypeError: "Cannot convert undefined or null to object" 其中它既不是 null 也不是 undefined 并且实际上与原始 _.map 匹配，但这次订购。

为了停止它的抱怨，我再次添加了 _.map 作为最后的想法，但这次使用 sortedEmployees 并返回 { ...val, uid} 并且它可以工作。

无法使用 firebase 查询方法，因为我必须通过不知道每个员工的密钥的孩子（密钥）的孩子来订购。

这是我按照您的上述 arrWithKeys 和 sortedEmployees 添加 _.map 作为事后思考的作品

const mapStateToProps = state => {
    const arrWithKeys = Object.keys(state.employees).map((uid) => {
        return {
            ...state.employees[uid],
            uid,
        };
    });

    const sortedEmployees = _.orderBy(
        arrWithKeys,
        [employee => employee.name.toLowerCase()],
    );

    const employees = _.map(sortedEmployees);

    return { employees };
};

https://lodash.com/docs/4.17.4#map
https://lodash.com/docs/4.17.4#orderBy

【讨论】：