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

Question

我的React组件中有一个render方法。 我想显示一个特定的URL，具体取决于道具的价值。 所以，我创建了一个对应于我的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 prop中调用。 问题是我无法在接下来的几天内测试此功能是否有效。 所以，我在想，如果你能看一眼就告诉我它是否有问题。

我觉得我做了一些时髦的事，但我没有得到任何错误，我不确定，我做得对。 会是一个巨大的帮助。

预期行为：

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

Answer 1

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

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

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

然后将它传递给孩子

moreUrl={getSecurityModeURL.url || ''}

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