当我必须遍历多个数据数组时，如何遍历React中的表单元格和行？

Question

我正在尝试实现一个表，但是由于我必须遍历每一行的多个数组，因此我的项目将无法在正确的行中呈现，或者是高度混乱，因为我认为我没有实现该表正确地。有人可以帮忙吗？

<table id="customers">
    <thead>
        <tr>
            <th>Country</th>
            <th>Cities</th>
            <th>Shops</th>
            <th>Map</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> {this.renderCountries()}</td>
            <td> {this.state.renderCities ? this.renderCities() :
                <p>{this.state.defaultCity}</p>} </td>
            <td> {this.state.renderShops ? this.renderShops() :
                <p>{this.state.defaultShopName}</p>} </td>
            <td> {this.state.renderMap ? this.renderMap() : null} </td>
        </tr>
    </tbody>
</table>

在我的方法（renderCountries等）中，我遍历特定数组并返回另一个组件

   renderCountries = () => {
    return this.state.countries.map((country, index) => {
        return (
            <Column
                key={index}
                data={country}
            />
        )
    })
};

const Column = ({data}) => (<p> {data}</p>);

到目前为止，我的解决方法是唯一一种至少可以在正确的单元格中呈现所有项目的方法，但是，它弄乱了CSS（第二行，所有项目向下移动了200px），我认为是因为我没有正确实现表格，但是当我将其更改为其他任何内容时，项目将无法正确呈现。如果需要更多信息，请告诉我。