如何在 ES6/React 的段落中显示来自 2 个数组的值

Question

我在 React 中使用更大的数组，并希望如下显示：图像/名称图像/名称图像/名称。我有以下代码，但我不知道如何将图像数组映射到它显示它的图像。谢谢

function showProtocolsNames() {
if (supportedVaults) {
  let arr = supportedVaults
    .map((item) => item.protocolName)
    .filter((item, index, arr) => {
      return arr.indexOf(item) == index;
    });

  let arrImages = supportedVaults
    .map((item) => item.protocolKey)
    .filter((item, index, arr) => {
      return arr.indexOf(item) == index;
    });

  let protocolsName = [...new Set(arr)];
  let protocolsImages = [...new Set(arrImages)];
  console.log(protocolsName, protocolsImages);

  return protocolsName.map((vault) => {
    return (
      <>
        {' '}
        <img
          src={getVaultIcon(vault)}
          width="42px"
          height="42px"
          style={{
            marginRight: '12px',
          }}
        />
        <p className="vaults-protocol">{vault}</p>
      </>
    );
  });
}
return null;

}

已解决： 通过一起创建图像和名称的数组，然后像 DBS 在 cmets 中建议的那样对其进行映射。

Answer 1

我相信对于您的问题有一个比您当前的方法更简单的解决方案。例如，您可以在映射图像/名称组件时立即使用supportedVaults 数据，如下所示：

function showProtocolsNames() {
  // added check to ensure there is data inside supportedVaults
  if (supportedVaults.length) {
    // removed the two mapped arrays

    // added index which is generated by map function
    return protocolsName.map((vault, index) => {
      // added div instead of <> in order to include a key, which is required in a map function
      return (
        <div key={`${index}-${vault?.protocolKey}`}>
          {" "}
          <img
            src={getVaultIcon(vault?.protocolKey)} // here we pass protocolKey to the getVaultIcon function
            width="42px"
            height="42px"
            style={{
              marginRight: "12px",
            }}
          />
          {/* here we add protocolName inside the paragraph */}
          <p className="vaults-protocol">{vault?.protocolName}</p>
        </div>
      );
    });
  }

  return null;
}

以上逻辑基于您对问题的描述，假设您需要传递 protocolKey 以在 getVaultIcon 函数中获取保险库图标，而 protocolName 是您需要显示为名称的值。如果我的看法有误，请编辑您的问题以反映更多信息，了解您需要从 supportedVaults 数组中获取哪些确切数据，或者 supportedVaults 具有什么格式。