Javascript 如何将具有多个状态变量的循环嵌套到表中？

如何在一个表中列出多个变量，
比如循环i，j，k

this.state = {

            materials: ['m1', 'm2'],
            quantity: ['2', '4'],
            unitPrice : ['12', '15'],
            detailtotal: ['0', '1'],
        };

并列出：

<Table>
    <thead>
        <th>Material</th>
        <th>Quantity</th>
        <th>Unit Price</th>
        <th>total</th>
    </thead>
    <tbody>
    {this.state.materials.map( obj => {return(
        <tr>
            <td >{obj.materials}</td>
            <td>{obj.quantity}</td>
            <td>{obj.unitPrice}</td>
            <td>{obj.detailtotal}</td>
        </tr>
    )})}
    </tbody>
</Table>

布料
量
单价
全部的
{this.state.materials.map（obj=>{return(
{obj.materials}
{obj.quantity}
{obj.单价}
{obj.detailtotal}
)})}

预期结果如下：

物料数量单价合计
_____________________________
m12120
m2 4 15 1

如果引用，您将看到Array.prototype.map（）方法为您提供当前元素的索引。因此，您所要做的就是：（但这假设所有数组中的数据顺序相同）

然后你可以这样称呼他们：

    {this.state.materials.map(obj => (
        <tr>
            <td >{obj.material}</td>
            <td>{obj.quantity}</td>
            <td>{obj.unitPrice}</td>
            <td>{obj.total}</td>
        </tr>
    ))}

{this.state.materials.map（obj=>(
{obj.material}
{obj.quantity}
{obj.单价}
{obj.total}
))}

您可以将状态转换为此数组并在HTML中使用

let state = {

            materials: ['m1', 'm2'],
            quantity: ['2', '4'],
            unitPrice : ['12', '15'],
            detailtotal: ['0', '1'],
   };

    values =    Object.values(state);
    result = [];
    for(i =0; i < values[0].length; i++){
       item = { materials: values[0][i], quantity: values[1][i], unitPrice: values[2][i], detailtotal: values[3][i]}
       result.push(item);
    }

    console.log(result)

let state={
材料：['m1'，'m2']，
数量：['2'，'4']，
单价：['12'，'15']，
detailtotal:[0'，'1']，
};
值=对象。值（状态）；
结果=[]；
对于（i=0；i<值[0]。长度；i++）{
item={物料：值[0][i]，数量：值[1][i]，单价：值[2][i]，明细合计：值[3][i]}
结果：推送（项目）；
}
console.log（结果）

let state={
材料：['m1'，'m2']，
数量：['2'，'4']，
单价：['12'，'15']，
详细信息总计：[0'，1']，
};
值=对象。值（状态）；
结果=[]；
对于（i=0；i<值[0]。长度；i++）{
item={物料：值[0][i]，数量：值[1][i]，单价：值[2][i]，明细合计：值[3][i]}
结果：推送（项目）；
}
console.log（结果）

    {this.state.materials.map(obj => (
        <tr>
            <td >{obj.material}</td>
            <td>{obj.quantity}</td>
            <td>{obj.unitPrice}</td>
            <td>{obj.total}</td>
        </tr>
    ))}

let state = {

            materials: ['m1', 'm2'],
            quantity: ['2', '4'],
            unitPrice : ['12', '15'],
            detailtotal: ['0', '1'],
   };

    values =    Object.values(state);
    result = [];
    for(i =0; i < values[0].length; i++){
       item = { materials: values[0][i], quantity: values[1][i], unitPrice: values[2][i], detailtotal: values[3][i]}
       result.push(item);
    }

    console.log(result)