从 JSON ReactJS 渲染数据：数据不显示为列答案

【问题标题】：Render data from JSON ReactJS: Data not displaying as columns从 JSON ReactJS 渲染数据：数据不显示为列
【发布时间】：2020-12-14 00:02:37
【问题描述】：

我正在使用 reactJS 构建一个 Web 应用程序。我们应该以表格的形式显示用户订阅的产品。例如，这里是响应：

{
    "data" : [
        {
          "user": "user1",
          "subscriptions": [
          {
             " productid":1,
             " productname":"user1_product_1",
           "productIdvalue" : 20
          }, {
            " productid":2,
            " productname":"user1_product_2",
          "productIdvalue" : 25
         }]
        },
        {
            "user": "user2",
            "subscriptions": [
                {
                    " productid":1,
                    " productname":"user2_product_1",
                  "productIdvalue" : 20
                 }, {
                    " productid":2,
                    " productname":"user2_product_2",
                  "productIdvalue" : 30
                 }, {
                    " productid":3,
                    " productname":"user2_product_3",
                  "productIdvalue" : 20
                 }, {
                    " productid":4,
                    " productname":"user2_product_4",
                  "productIdvalue" : 20
                 }]
        }
      ]
}

因此，订阅数据是动态的。如何在表格数据中显示上述数据，如下所示：Mock 用户可以订阅任意数量的产品。截至目前，我们没有订阅超过 4 种产品的用户。

我实现的代码如下：

class Example2 extends Component {
    render() {
        return (
      <table>
            <div>
                {
                    data.data.map((data, i) => {
                        return (
                            <tr key={i}>
                  {data.subscriptions.map(function (subscription, i) { 
                                                return <div key={i}>
                          <td>{subscription.productname}</td>
                          <td>{subscription.productIdvalue}</td>
                                                </div>
                                            })}
                            </tr>
                        );
                    })
                }
            </div>
            </table>
        );
    }
} 
export default Example2;

使用上面的代码，每个 'td' 都会显示在新的一行上。请告诉我如何更正我的代码。

【问题讨论】：

标签： javascript reactjs react-native react-redux rxjs

【解决方案1】：

两个主要问题：

更正您的数据

" productid":1,                   // start with space, try to remove it
" productname":"user1_product_1", // like above
"productIdvalue" : 20

当你的object key不正确时，你不能通过key渲染dom。

不要在<tr>之间添加<div>

<tr key={i}>
  {data.subscriptions.map(function (subscription, i) { 
    return <div key={i}> // change <div> to <React.Fragment key={i}>
      <td>{subscription.productname}</td>
      <td>{subscription.productIdvalue}</td>
    </div>               // change </div> to </React.Fragment>
   })}
</tr>

codesandbox for example

【讨论】：