Как я могу отображать данные с помощью цикла в React?

Question

У меня есть следующий код, который работает.Тем не менее, есть много повторений.Вот код.

            <tr>
                <th>Brand</th>
                <td>{ a_data.brand }</td>
                <td>{ b_data.brand }</td>
                <td>{ c_data.brand }</td>
            </tr>

            <tr>
                <th>Model</th>
                <td>{ a_data.model }</td>
                <td>{ b_data.model }</td>
                <td>{ c_data.model }</td>
            </tr>

            <tr>
                <th>Variant</th>
                <td>{ a_data.variant }</td>
                <td>{ b_data.variant }</td>
                <td>{ c_data.variant }</td>
            </tr>

Я попытался создать массив const data = ['a_data', 'b_data', 'c_data']; и пройти через него, чтобы динамически отображать переменные с forEach и map.Но он ничего не отображает.

Как я могу поместить это в цикл?

Answer 1

Есть много решений вашей проблемы, одно и простое решение -

    const a_data = {
    brand:'a',
    model:'aModel',
    variant:'aVariant'
}
const b_data = {
    brand:'b',
    model:'bModel',
    variant:'bVariant'
}
const c_data = {
    brand:'c',
    model:'cModel',
    variant:'cVariant'
}
const data = [a_data,b_data,c_data];
const brands = data.map(brand => (
    <td>{ brand.brand }</td>
));
const models = data.map(brand => (
    <td>{ brand.model }</td>
));
const variants = data.map(brand => (
    <td>{ brand.variant }</td>
));

<tr>
    <th>Brand</th>
    { brands }
</tr>

<tr>
    <th>Model</th>
    { models }
</tr>

<tr>
    <th>Variant</th>
    { variants }
</tr>

, как вы можете видеть в этом решении, я использую макет для ваших объектов и добавляю эти объекты в массив, называемый данными.

Answer 2

Это может быть немного многословно, но вы можете изменить его, если хотите.Суть:

const data = [a_data, b_data, c_data];

const brands = data.map(brand => <td>{ brand.brand }</td>);
const models = data.map(brand => <td>{ brand.model }</td>);
const variants = data.map(brand => <td>{ brand.variant }</td>);

<tr>
    <th>Brand</th>
    { brands }
</tr>

<tr>
    <th>Model</th>
    { models }
</tr>

<tr>
    <th>Variant</th>
    { variants }
</tr>