时间戳

首页 > 解决方案 > 从对象中检索值的辅助函数失败，对象中有多个项目

javascript - 从对象中检索值的辅助函数失败，对象中有多个项目

问题描述

当用户的 UID 作为参数传递时，我有一个辅助函数可以从 redux 存储中检索用户的姓名或电子邮件

From the store

console.log(typeof users) //object
console.log(users)

[
    0: {
        displayName: "User One"
        email: "userone@example.com"
        id: "c9E5RfPVVxMNPz3MsORs76cG46G3"
    },
    1: {
        displayName: "User Two"
        email: "usertwo@example.com"
        id: "mbuPoIcEMOhEvSB23IRqj5AIbZn2"
    }
]

// getUserDetails.js

import { useSelector } from 'react-redux';

export function getUserDetails(searchKey) {
  const users = useSelector((state) => state.firestore.ordered.users);
  console.log(users)
  console.log(typeof users)
  return (
    users &&
    searchKey &&
    users.filter(function (obj) {
      return Object.keys(obj).some(function (key) {
        return obj[key].includes(searchKey);
      });
    })
  );
}

它被我的@devexpress/dx-react-gridCRUD 表使用，通过获取字段createdBy: fdsj75g43hfihsdhi并返回名称或电子邮件，如下所示：

  const UserNameFormatter = ({ value }) => {
    return getUserDetails(value)[0].displayName;
  };

该函数仅适用于一个用户，但一旦我将另一个用户添加到 Firestore，该函数就会引发错误：

TypeError: obj[key].includes is not a function
(anonymous function)
src/utils/getUserDetails.js:10
   7 |   searchKey &&
   8 |   users.filter(function (obj) {
   9 |     return Object.keys(obj).some(function (key) {
> 10 |       return obj[key].includes(searchKey);
     | ^  11 |     });
  12 |   })
  13 | );

我很感激任何建议，谢谢。

标签： javascriptreactjs

解决方案

您似乎希望每个键都是一个字符串，但情况并非总是如此。

我建议在使用这样的包含方法之前进行检查：

import { useSelector } from 'react-redux';

export function getUserDetails(searchKey) {
  const users = useSelector((state) => state.firestore.ordered.users);
  console.log(users)
  console.log(typeof users)
  return (
    users &&
    searchKey &&
    users.filter(function (obj) {
      return Object.keys(obj).some(function (key) {
        return typeof obj[key] === "string" && obj[key].includes(searchKey);
      });
    })
  );
}

推荐阅读