Reactjs 使用for loop inside return（）函数在列表中显示数据

我有以下两个清单：

customer\u id=[1,2,3,4,5]

customer\u name=[John、Michael、Sara、Tony、Angel]

我需要将表中的上述数据显示为不同的行。 我已经写了下面的代码，但它不工作

return (    
< div >   
          for(var i=0; i< customer_id.length; i++){    
          < tr>    
               < td>{customer_id[i]}< /td>    
               < td>{customer_name[i]}< /td>    
          < /tr>    
}    
< /div >    
);

返回（

对于（var i=0；i
{customer_id[i]}
{客户名称[i]}

}    

);

---

我很想知道我错在哪里。谢谢。

如果你想为循环使用

，你可以拥有一个数组，你可以将每个
tr
推到其中，然后在循环后渲染数组


类应用程序扩展了React.Component{
状态={
客户id:[1,2,3,4,5]，
客户名称：[“约翰”、“迈克尔”、“莎拉”、“托尼”、“安吉尔”]
};
render（）{
const{customer\u id，customer\u name}=this.state；
常量结果=[]；
对于（变量i=0；i
如果您想为
循环使用一个
，您可以将每个
tr
推送到一个数组中，然后在循环后渲染该数组


类应用程序扩展了React.Component{
状态={
客户id:[1,2,3,4,5]，
客户名称：[“约翰”、“迈克尔”、“莎拉”、“托尼”、“安吉尔”]
};
render（）{
const{customer\u id，customer\u name}=this.state；
常量结果=[]；
对于（变量i=0；i
我将使用
Array.map
编写它，如下所示。使用
.map
我们在这里创建一个表行数组。然后
App
组件以
作为表体呈现实际表格

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function TableRows({ customerIds, customerNames }) {
  return customerIds.map((id, index) => (
    <tr key={id}>
      <td>{id}</td>
      <td>{customerNames[index]}</td>
    </tr>
  ));
}

function App() {
  var customerIds = [1, 2, 3, 4, 5];
  var customerNames = ["John", "Michael", "Sara", "Tony", "Angel"];

  return (
    <table>
      <tbody>
        <TableRows customerIds={customerIds} customerNames={customerNames} />
      </tbody>
    </table>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
函数表行（{customerId，customerNames}）{
返回customerIds.map（（id，索引）=>(
{id}
{客户名称[索引]}
));
}
函数App（）{
var customerIds=[1,2,3,4,5]；
var customerNames=[“约翰”、“迈克尔”、“莎拉”、“托尼”、“天使”]；
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（.
我将使用
数组.map
编写它，如下所示。使用
.map
我们在这里创建一个表行数组。然后
App
组件将这些
作为表体呈现实际表

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function TableRows({ customerIds, customerNames }) {
  return customerIds.map((id, index) => (
    <tr key={id}>
      <td>{id}</td>
      <td>{customerNames[index]}</td>
    </tr>
  ));
}

function App() {
  var customerIds = [1, 2, 3, 4, 5];
  var customerNames = ["John", "Michael", "Sara", "Tony", "Angel"];

  return (
    <table>
      <tbody>
        <TableRows customerIds={customerIds} customerNames={customerNames} />
      </tbody>
    </table>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
函数表行（{customerId，customerNames}）{
返回customerIds.map（（id，索引）=>(
{id}
{客户名称[索引]}
));
}
函数App（）{
var customerIds=[1,2,3,4,5]；
var customerNames=[“约翰”、“迈克尔”、“莎拉”、“托尼”、“天使”]；
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（.
尝试将数据结构化为客户列表，有两个单独的列表可能会变得混乱

var customers = [{Id:1, Name:John}, {Id:2, Name:Michael}, {Id:3, Name:Sara}, {Id:4, Name:Angel}, {Id:5, Name:Tony}]

var result = (
    {customers.map((customer, index) => (
          < tr>    
               < td>{customer.Id}< /td>    
               < td>{customer.Name}< /td>    
          < /tr>   
    ))})

return <div> {result} </div>;

var-customers=[{Id:1，Name:John}，{Id:2，Name:Michael}，{Id:3，Name:Sara}，{Id:4，Name:Angel}，{Id:5，Name:Tony}]
var结果=(
{customers.map（（客户，索引）=>(

{customer.Id}
{customer.Name}

))})
返回{result}；

有关array.map函数的更多信息，请参阅。
尝试将数据结构化为客户列表，两个单独的列表可能会变得混乱

var customers = [{Id:1, Name:John}, {Id:2, Name:Michael}, {Id:3, Name:Sara}, {Id:4, Name:Angel}, {Id:5, Name:Tony}]

var result = (
    {customers.map((customer, index) => (
          < tr>    
               < td>{customer.Id}< /td>    
               < td>{customer.Name}< /td>    
          < /tr>   
    ))})

return <div> {result} </div>;

var-customers=[{Id:1，Name:John}，{Id:2，Name:Michael}，{Id:3，Name:Sara}，{Id:4，Name:Angel}，{Id:5，Name:Tony}]
var结果=(
{customers.map（（客户，索引）=>(

{customer.Id}
{customer.Name}

))})
返回{result}；

有关array.map函数的更多信息，请参阅。
您的代码中有许多错误。为什么
内部
？您的代码中有许多错误。为什么
内部
？