Question

如何在表中列出许多变量，
就像for循环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>

预期结果

物料数量单价总计
_____________________________
m1 2 12 0
平方米4 15 1

Answer 1

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

{this.state.materials.map((obj, index) => (
    <tr>
        <td >{obj.materials[index]}</td>
        <td>{obj.quantity[index]}</td>
        <td>{obj.unitPrice[index]}</td>
        <td>{obj.detailtotal[index]}</td>
    </tr>
))}

更好的方法是将相关数据一起保存在单个对象中，如下所示：

this.state = {
  materials: [
    {
      material: 'm1',
      quantity: 2,
      unitPrice: 12,
      total: 0
    },
    {
      material: 'm2',
      quantity: 4,
      unitPrice: 15,
      total: 1
    }
  ]
}

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

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

Answer 2

您可以将状态转换为该数组并在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 = {
       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)

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

2 个答案: