как вложенный цикл со многими переменными состояния в таблицу?

Question

Как вывести много переменных в таблицу,
как для цикла 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>

ожидаемый результат как

материал кол-во штучная цена всего
_____________________________
м1 2 12 0
м2 4 15 1

Answer 1

Если вы ссылаетесь здесь , вы увидите, что метод 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)