使用索引渲染循环字符串

Question

我正在尝试呈现与索引相同的百分比

我的代码

let date = [
  { start_date: '22-2-2022', end_date: '28-2-2022' },
  { start_date: '1-3-2022', end_date: '31-3-2022' },
  { start_date: '1-4-2022', end_date: '30-4-2022' },
];
let arr = [
  { target_amount: 1000 },
  { target_amount: 2000 },
];

let percentage = 5;

date.map((data, index) => {
  return (
    <>
      Date {index+1} = {data.start_date} - {data.end_date}
      {arr.map((trg, idx) => {
        return (
          <>
            {index > 1
              ? `Tier ${idx + 1} = ${trg.target_amount} + ${percentage}%`
              : `Tier ${idx + 1} = ${trg.target_amount}`}
          </>
        );
      })}
    </>
  );
});

我现在的代码输出是这样的

Date 1 = 22-2-2022 - 28-2-2022

Tier 1 = 1000
Tier 2 = 2000 


Date 2 = 1-3-2022 - 31-3-2022

Tier 1 = 1000 + 5%
Tier 2 = 2000 + 5%


Date 3 = 1-4-2022 - 30-4-2022

Tier 1 = 1000 + 5%
Tier 2 = 2000 + 5%

我期望的是这样的，5% 将添加到日期索引之后。
我试图渲染它，但我无法弄明白

Date 1 = 22-2-2022 - 28-2-2022 

Tier 1 = 1000
Tier 2 = 2000 


Date 2 = 1-3-2022 - 31-3-2022

Tier 1 = 1000 + 5%
Tier 2 = 2000 + 5%


Date 3 = 1-4-2022 - 30-4-2022

Tier 1 = 1000 + 5% + 5%
Tier 2 = 2000 + 5% + 5%

感谢任何帮助，谢谢

Answer 1


date.map((data, index) => {
        return (
          <>
            Date {index + 1} = {data.start_date} - {data.end_date}
            {arr.map((trg, idx) => {
              let p = "";
              for (var i = 0; i < index; i++) {
                p += ` + ${percentage}%`;
              }
              return (
                <div>
                  {index > 0
                    ? `Tier ${idx + 1} = ${trg.target_amount}` + p
                    : `Tier ${idx + 1} = ${trg.target_amount}`}
                </div>
              );
            })}
          </>
        );
      })

Answer 2

是这样的吗？

const percentageString = ` + ${percentage}%`.repeat(index)

在你的外循环中，然后在内循环中引用那个值。

例如：

百分比 = 5

指数=0

结果''

索引 = 2

结果 = '+ 5% + 5%'

使用索引渲染循环字符串

render looping string with the index

reactjs

foreach

mapping

例如：