javascript - 我如何通过数组过滤并返回正确的属性？

我的React Component中有一个render方法。我想显示一个特定的URL，具体取决于prop的值。因此，我制作了一个与我的prop值选项相对应的Objects数组，以及每个对象具有的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将解析为数组，而不是函数。因此，如果在子级中调用moreUrl={getSecurityModeURL()}行，则会导致错误。

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

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

然后传给孩子

moreUrl={getSecurityModeURL.url || ''}

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

关于javascript - 我如何通过数组过滤并返回正确的属性？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55580363/