Javascript ReactJS将2个数组转换为表

我有两个数组，我想在一个表中呈现

const arr1=[“项目1”、“项目2”、“项目3”、“项目4”]
常数arr2=[“价格1”、“价格2”、“价格3”、“价格4”]

我想将此转换为

项目1
价格1
项目2
价格2
项目3
价格3
项目4
价格4

注意：保证阵列具有相同的长度。
有人可以建议如何在React中动态执行此操作。

---

谢谢

您可以将所有行存储在一个数组中，然后在

表中使用它

：

export default function App() {
  const arr1 = ["item1","item2","item3","item4"]
  const arr2 = ["price1","price2","price3","price4"]
  const rows = []
  for (const [index, value] of arr1.entries()) {
    rows.push(
      <tr key={index}>
        <td>{value}</td>
        <td>{arr2[index]}</td>
      </tr>
    )
  }
  return (
    <div className="App">
      <table>
        <tbody>
          {rows}
        </tbody>
      </table>
    </div>
  );
}

导出默认函数App（）{
常量arr1=[“项目1”、“项目2”、“项目3”、“项目4”]
常数arr2=[“价格1”、“价格2”、“价格3”、“价格4”]
常量行=[]
for（arr1.entries（）的常量[索引，值]）{
推(
{value}
{arr2[index]}
)
}
返回(
{rows}
);
}

您可以将所有行存储在一个数组中，然后在

表中使用它

：

export default function App() {
  const arr1 = ["item1","item2","item3","item4"]
  const arr2 = ["price1","price2","price3","price4"]
  const rows = []
  for (const [index, value] of arr1.entries()) {
    rows.push(
      <tr key={index}>
        <td>{value}</td>
        <td>{arr2[index]}</td>
      </tr>
    )
  }
  return (
    <div className="App">
      <table>
        <tbody>
          {rows}
        </tbody>
      </table>
    </div>
  );
}

导出默认函数App（）{
常量arr1=[“项目1”、“项目2”、“项目3”、“项目4”]
常数arr2=[“价格1”、“价格2”、“价格3”、“价格4”]
常量行=[]
for（arr1.entries（）的常量[索引，值]）{
推(
{value}
{arr2[index]}
)
}
返回(
{rows}
);
}

如果数组总是具有相同的长度，您可以使用map或类似的方法

<table>
{
   arr1.map((element, index) => <tr>
     // The first one is the nth element from the array
     // The second one we just access through index
        <td>{element}</td>
        <td>{arr2[index]}</td>
    </tr>
)
}
</table>

{
arr1.map（（元素，索引）=>
//第一个是数组中的第n个元素
//第二个我们只是通过索引访问
{element}
{arr2[index]}
)
}

或

{
数组（arr1.length）.map（（元素，索引）=>
//我们只是通过索引访问
{arr1[index]}
{arr2[index]}
)
}

如果数组总是具有相同的长度，您可以使用map或类似的方法

<table>
{
   arr1.map((element, index) => <tr>
     // The first one is the nth element from the array
     // The second one we just access through index
        <td>{element}</td>
        <td>{arr2[index]}</td>
    </tr>
)
}
</table>

{
arr1.map（（元素，索引）=>
//第一个是数组中的第n个元素
//第二个我们只是通过索引访问
{element}
{arr2[index]}
)
}

或

{
数组（arr1.length）.map（（元素，索引）=>
//我们只是通过索引访问
{arr1[index]}
{arr2[index]}
)
}

@Dev5不客气。请将答案标记为结束问题的解决方案。@Dev5不客气。请将答案标记为结束问题的答案。