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

Question

我的 React 组件中有一个渲染方法。我想显示一个特定的 URL，具体取决于 Prop 的值(value)。因此，我创建了一个对象数组，对应于我的 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。

Answer 1

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

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

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

然后传给 child

moreUrl={getSecurityModeURL.url || ''}

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