javascript - 尝试使用 map 方法而不是使用 React Typescript 的 for 循环

Question

我正在尝试使用 map 方法而不是使用 React Typescript 的 for 循环来处理以下代码，但无法正常工作

使用 for 循环的实际代码:

renderFunction(perkProgressData) {
    let tiers = [];
    let currentData = { item: {} }
    const data = perkProgressData.perkProgressData
    if (data && data.program && data.program.tiers) {
      tiers = data.program.tiers
      **for (let i = 0; i < tiers.length; i++) {**
        if (tiers[i].tierPerks[0].perkStatus === "UNCLAIMED" ||
          data.currentTierId === tiers[i].tierId) {
          currentData = { item: tiers[i] }
          break;
        }
      }
    }

尝试使用 .map():(不工作)

renderFunction(perkProgressData) {
    let tiers = [];
    let currentData = { item: {} }
    const data = perkProgressData.perkProgressData
    if (data && data.program && data.program.tiers) {
      tiers = data.program.tiers
      tiers.map((val) => {
        if (val.tierPerks && val.tierPerks[0].perkStatus === "UNCLAIMED" || 
          data.currentTierId === val.tierId) {
            currentData = { item: val }
          }
        });
      }
    }

Answer 1

map 在这里不是正确的选择，您不需要它创建的新数组。此外，您想尽早停止，map 不会这样做(除非您抛出错误)。

for 循环很好，尽管您可能会考虑使用 for-of，因为您不使用索引:

renderFunction(perkProgressData) {
    let tiers = [];
    let currentData = { item: {} };
    const data = perkProgressData.perkProgressData;
    if (data && data.program && data.program.tiers) {
      tiers = data.program.tiers;
      for (const tier of tiers) {
        if (tier.tierPerks[0].perkStatus === "UNCLAIMED" ||
          data.currentTierId === tier.tierId) {
          currentData = { item: tier };
          break;
        }
      }
    }
    // ...

或者如果您在循环后不需要 tiers:

renderFunction(perkProgressData) {
    let currentData = { item: {} };
    const data = perkProgressData.perkProgressData;
    if (data && data.program && data.program.tiers) {
      for (const tier of data.program.tiers) {
        if (tier.tierPerks[0].perkStatus === "UNCLAIMED" ||
          data.currentTierId === tier.tierId) {
          currentData = { item: tier };
          break;
        }
      }
    }
    // ...

如果你真的想使用数组方法，find会有意义:

renderFunction(perkProgressData) {
    const data = perkProgressData.perkProgressData
    let currentData =
      ( data &&
        data.program &&
        data.program.tiers &&
        data.program.tiers.find(tier =>
          tier.tierPerks[0].perkStatus === "UNCLAIMED" || data.currentTierId === tier.tierId
        )
      ) ||  { item: {} };
    // ...