Reactjs 在react jsx的.map（）中插入计数器

我需要映射两个不同的数组，将它们作为行添加到单个表中。为此，我尝试使用计数器而不是索引（因为react要求每次迭代都有一个唯一的键）。我不能对键使用索引，因为我必须连接，这使得每行的索引不是唯一的。因此，相反，我尝试使用计数器，但我被困在如何增加数字上

...
    {dateTable.categories.map((category, indexThree, categories) =>
      {
        let rowCounter = 0;
        const firstRows = category.firstRows.map((row, indexFour, firstRowsArr) =>
          <tr key={indexFour}>
            {indexFour === 0 ?
            <td>
                <h5>{category.name}</h5>
            </td> : <td />
            }
            <td>{row.valOne}</td>
            <td style={{backgroundColor: "#ffedbc"}}>{row.valTwo}</td>
            <td>{row.valThree}</td>
            <td>{row.valFour}</td>
          </tr>
        );
        const secondRows = category.secondRows.map((row, indexFive, secondRowsArr) =>
        <tr key={indexFive+rowCounter}>
          {indexFive === 0 && category.firstRows.length === 0 ?
          <td>
              <h5>{category.name}</h5>
          </td> : <td />
          }
          <td>{row.valOne}</td>
          <td>{row.valTwo}</td>
          <td>{row.valThree}</td>
          <td>{row.valFour}</td>
        </tr>
        );
        console.log("rowCounter", rowCounter);
        return firstRows.concat(secondRows);
      }
    )}
...

。。。
{dateTable.categories.map（（category，indexThree，categories）=>
{
设rowCounter=0；
const firstRows=category.firstRows.map（（row，indexFour，firstrowsar）=>
{indexFour==0？
{category.name}
: 
}
{row.valOne}
{row.valTwo}
{row.valThree}
{row.valFour}
);
const secondRows=category.secondRows.map（（row，indexFive，secondrowsar）=>
{indexFive==0&&category.firstRows.length==0？
{category.name}
: 
}
{row.valOne}
{row.valTwo}
{row.valThree}
{row.valFour}
);
console.log（“rowCounter”，rowCounter）；
返回第一行。concat（第二行）；
}
)}
...

您可以在第二个数组索引上添加第一个数组长度，而无需使用计数器

<tr key={indexFive + firstRows.length}>

---

您可以在第二个数组索引上添加第一个数组长度，而无需使用计数器

<tr key={indexFive + firstRows.length}>

您可以使用

<tr key={rowCounter++}>

两者都有

---

但是，如果您不打算对任意数量的类别使用它，那么您应该删除计数器，并为每个数组添加不同的字符串及其索引

<tr key={`first-${indexFour}`}>

及

---

但是最好的办法是，如果你有一个reach行的唯一键，那么你就可以这样做了

<tr key={row.someUniqueKey}>

您可以使用

<tr key={rowCounter++}>

两者都有

---

但是，如果您不打算对任意数量的类别使用它，那么您应该删除计数器，并为每个数组添加不同的字符串及其索引

<tr key={`first-${indexFour}`}>

及

---

但是最好的办法是，如果你有一个reach行的唯一键，那么你就可以这样做了

<tr key={row.someUniqueKey}>

键是一个字符串。您可以只使用两个索引，并使用分隔符。或者您可以先创建一个平面数组，然后映射到该数组上。键是字符串。您可以只使用两个索引，并使用分隔符。或者您可以先创建一个平面阵列，然后映射到该阵列上。这非常有效。我应该想到这一点，但可能只是需要休息。非常感谢！！！这很好用。我应该想到这一点，但可能只是需要休息。非常感谢！！！这实际上回答了问题。这实际上回答了问题。