我如何过滤数组并返回正确的属性？答案

【问题标题】：How i can filter through an Array and return the correct property?我如何过滤数组并返回正确的属性？
【发布时间】：2019-08-30 00:17:39
【问题描述】：

我的 React 组件中有一个渲染方法。我想根据道具的值显示特定的 URL。因此，我创建了一组与我的 prop 值选项相对应的对象，以及每个对象的 URL。

const SecurityModeOptions: any[] = [
  { securityMode: 'mode1', url: 'https://docs.mode1' },
  { securityMode: 'mode2', url: 'https://docs.mode2' },
  { securityMode: 'mode3', url: 'https://docs.mode3' }
];

  renderBasicMode = () => {
    const { securityMode } = this.props;
    const getSecurityModeURL = SecurityModeOptions.filter(
       url => SecurityModeOptions.SecurityMode === securityMode
    );
    return (
      <div>
        <NoResource
          icon="user-o"
          title="Security Mode"
          moreUrl={getSecurityModeURL()}
        />
      </div>
    );
  };

所以，我创建了这个过滤器函数，我在 moreUrl 属性中调用它。问题是在接下来的几天里，我无法测试此功能是否有效。所以，我在想，如果你能看一下，告诉我它是否有问题。

我感觉我做了一些时髦的事情，但我没有收到任何错误，而且我不确定，我做对了。会有很大的帮助。

预期行为：

如果SecurityModeOption 中的securityMode 与this.props.securityMode 匹配，则会在moreUrl 属性中看到相应的URL。

【问题讨论】：

getSecurityModeURL 真的是函数吗？输入不同的securityMode 并检查是否可以在NoResource 组件中呈现当前url
首先打开开发工具控制台...应该在那里看到错误。这是你的第一个线索是什么问题
如果我能做到，我会的。在接下来的几天里，我无法检查此功能，而且我仍然是初级开发人员，所以不确定这是否有效。因此问题。
可以轻松打开任何沙箱站点并在 react 之外测试您的过滤器，然后查看它返回的内容。显示的内容会引发错误
你仍然可以模拟它。你有一系列模式，你知道你会得到securityMode，因为道具会尝试渲染一些简单的东西，只是为了检查你没有错误和你需要的正确网址

标签： javascript reactjs typescript filter

【解决方案1】：

这有几个问题。 getSecurityModeURL 将解析为数组，而不是函数。所以如果在子进程中调用moreUrl={getSecurityModeURL()} 行最终会导致错误。

如果您希望getSecurityModeURL 解析为单个对象，您需要使用.find 而不是.filter。所以最终看起来像：

const getSecurityModeURL = SecurityModeOptions.find(
   x => x.SecurityMode === securityMode
);

然后将其传递给孩子

moreUrl={getSecurityModeURL.url || ''}

就测试而言，您似乎有样本数据，为什么不能用它进行测试？其他一切看起来都很好。

【讨论】：

filter() 也没有正确使用
我无法测试它，因为道具不存在，我无法模拟它。当前仅存在默认值。其余功能将在接下来的几天内推出，但我不想等到那时出现问题。嗯，所以我犯了很多错误。应该知道过滤器会返回一个数组..需要记住..
那么给道具一个值，然后测试呢？我不明白问题出在哪里。