如何在 JSX 列中显示数组，而不是一行答案

【问题标题】：How to display arrays in an JSX column, NOT a row如何在 JSX 列中显示数组，而不是一行
【发布时间】：2020-08-14 11:20:35
【问题描述】：

我正在开发一个反应应用程序。我正在从后端接收数组中的数据。例如，我收到一个标题数组、另一个价格数组等……我总共有四个数组。我将这些数组设置为状态，然后我想将它们呈现到表格中的网页中。问题是标签将所有数据都放在一行中。我想在其单独的列中显示每个数组。但是，在通过数组映射之后，我能够发现的唯一选择是将它们放在表格行中。这是我目前的解决方案：

 <table>
                <tbody className="column">
                    <tr>
                        <th>Title</th>
                    </tr>
                    {this.state.cartTitles.map((item => 
                        <tr><td key={item}>{item}</td></tr>    
                    ))}
                    </tbody>
                    <tbody className="column1">
                        <th>Price</th>
                    {this.state.cartPrice.map((item =>
                       <tr><td key={item}>{item}</td></tr>
                    ))}
                    </tbody>
                    <tbody className="column2">
                         <th>Quantity</th>
                    {this.state.cartQuantity.map((item =>
                       <tr><td key={item}>{item}</td></tr>
                    ))}
                    </tbody>
                    <tbody className="column3"> 
                            <th>Total</th>
                    {this.state.cartTotal.map((item =>
                       <tr><td key={item}>${item}</td></tr>
                    ))}
                    </tbody> 
                </table>

我已经使用 css 来安排一个看起来非常凌乱的表格。然而，每一列基本上看起来就像它自己的一个列表，只是都贴在一起。有没有替代的解决方案？理想情况下，我会喜欢一个表格列标签；我相当肯定它不存在，但这是我正在寻找的解决方案。总结：我想在一个表格中显示四个数组，每个数组在它自己的列中。由于需要单独映射每个数组，我被困住了。基本上我希望每个数组的所有第一个元素都显示在同一行中，第二个元素相同，等等...... 任何想法都将不胜感激！！！

【问题讨论】：

标签： arrays reactjs html-table mapping jsx

【解决方案1】：

假设所有数组都具有相同数量的元素，您可以使用您选择的“主”数组（例如，cartTitles）的索引来排列它们：

<table>
    <thead>
        <tr>
            <td>Title</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Total</td>
        </tr>
    <thead>
    <tbody>
        {this.state.cartTitles.map( (title, index) => {
            return (
                <tr key={title}>
                    <td>{title}</td>
                    <td>{this.state.cartPrice[index]}</td>
                    <td>{this.state.cartQuantity[index]}</td>
                    <td>{this.state.cartTotal[index]}</td>
                </tr>
            )
        })}
    </tbody>
</table>

【讨论】：

【解决方案2】：

我会尝试以不同的方式存储数据。我以为您在谈论产品购物车... 使用price、title、quantity 和total 组成一个Cart 类，一旦您的数据以这种方式存储在您的状态中，就可以将每个购物车呈现在自己的行中。

const renderCartRow = () => {
  return this.state.carts.map(cart => {
    return (
      <tr key={cart.title}>
        <td>{cart.title}</td>
        <td>{cart.price}</td>
        <td>{cart.quantity}</td>
        <td>{cart.total}</td>
      </tr>
    )
  })
}

【讨论】：

【解决方案3】：

我对您的代码进行了一些更改。现在它将所有数组呈现在单独的列中以创建一个表。代码如下：

 <table>
      <tr>
        <th>
          <tr>
            <th>Title</th>
          </tr>
          {this.state.cartTitles.map((item) => (
            <tr>
              <td key={item}>{item}</td>
            </tr>
          ))}
        </th>
        <th>
          <th>Price</th>
          {this.state.cartPrices.map((item) => (
            <tr>
              <td key={item}>{item}</td>
            </tr>
          ))}
        </th>
        <th>
          <th>Quantity</th>
          {this.state.cartQuantity.map((item) => (
            <tr>
              <td key={item}>{item}</td>
            </tr>
          ))}
        </th>
        <th >
          <th>Total</th>
          {this.state.cartTotal.map((item) => (
            <tr>
              <td key={item}>${item}</td>
            </tr>
          ))}
        </th>
      </tr>
    </table>

【讨论】：