如何在 React 中使用循环显示数据？答案

【问题标题】：How can I display data with a loop in React?如何在 React 中使用循环显示数据？
【发布时间】：2018-11-22 07:23:18
【问题描述】：

我有以下有效的代码。但是，有很多重复。这是代码。

            <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 的变量。但它不显示任何内容。

我怎样才能把它放在一个循环中？

【问题讨论】：

只是{ data.map(datum => <td>{ datum.variant }</td>) }

标签： javascript reactjs loops ecmascript-6

【解决方案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>

正如您在此解决方案中看到的，我为您的对象使用了一个模拟对象并将这些对象添加到名为 data 的数组中。

【讨论】：

【解决方案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>

【讨论】：