用 ReactJS 和 map 显示 JSON 多维数组数据答案

【问题标题】：Displaying JSON multi-dimensional array data with ReactJS and map用 ReactJS 和 map 显示 JSON 多维数组数据
【发布时间】：2018-04-20 11:12:52
【问题描述】：

我有一些包含不同服装项目的多维 JSON 数据，每个服装项目都包含自己的信息数组。

我正在尝试使用 ReactJS 来显示它：

{Product Name}
  {size 1} has {quantity 1} in stock
  {size 2} has {quantity 2} in stock
  {size 3} has {quantity 3} in stock

我的 JSON 如下所示：

    {
        "myShirt": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ],
         "myShirt2": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ],
         "myShirt3": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ]
    }

例如，在这种情况下，我想要的输出是：

myShirt
    Small has 0 in stock
    Medium has 0 in stock
    Large has 0 in stock
myShirt2
    Small has 0 in stock
    Medium has 0 in stock
    Large has 0 in stock
myShirt3
    Small has 0 in stock
    Medium has 0 in stock
    Large has 0 in stock

我创建了一个 React 组件，其中包含此 JSON 数据作为其状态的一部分。该组件如下所示：

class Products extends React.Component {
    constructor() {
    super();
    this.state = {
        data: [
            {
                "myShirt": [
                    {
                        "size_text": "Small",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Medium",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Large",
                        "quantity": 0,
                    },
                ],

                "myShirt2": [
                    {
                        "size_text": "Small",
                        "quantity": 3,
                    },
                    {
                        "size_text": "Medium",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Large",
                        "quantity": 0,
                    },
                ],
                "myShirt3": [
                    {
                        "size_text": "Small",
                        "quantity": 3,
                    },
                    {
                        "size_text": "Medium",
                        "quantity": 0,
                    },
                    {
                        "size_text": "Large",
                        "quantity": 0,
                    },
                ]
            }]
        }
    }
    render() {
        return (
            <div>
                {
                    // HOW DO I DISPLAY MY OUTPUT HERE?
                }
            </div>
        );
    }
}

我显示输出的方法是使用 .map。但是，我用来执行此操作的裸代码并不成功。它看起来像这样：

render() {
    return (
        <div>
            {
                this.state.data.map((product, i) =>
                    <p>{product.map((productData, j) =>
                        <span>{productData.size_text}</span>
                    )
                    }</p>
                )
            }
        </div>
    );
}

此代码不会尝试显示整个输出，因为我只是在测试水域以查看是否可以得到任何东西，至少是要显示的大小。如您所知，我几乎陷入了组件的渲染功能中。我不知道如何访问产品名称，以及产品尺寸名称和数量。

您将如何解决这个问题以使其看起来像所需的输出？

谢谢！

【问题讨论】：

您的 json 似乎不正确。它是一个数组内的集合。它应该是两者之一。地图适用于数组，至于收集，您需要采用不同的方法。
@user2030942 请标记this 接受它解决了您的问题
@Fawaz 感谢您指出这一点。我已经解决了我的问题。

标签： javascript json reactjs

【解决方案1】：

您可以使用Object.keys() 遍历state 的每个键，然后使用array#map 遍历每个数组对象。

class Products extends React.Component {
  constructor() {
    super();
    this.state = { "myShirt": [ { "size_text": "Small", "quantity": 0 }, { "size_text": "Medium", "quantity": 0 }, { "size_text": "Large", "quantity": 0}, ], "myShirt2": [ { "size_text": "Small", "quantity": 3 }, { "size_text": "Medium", "quantity": 0}, { "size_text": "Large", "quantity": 0}, ], "myShirt3": [ { "size_text": "Small", "quantity": 3 }, { "size_text": "Medium", "quantity": 0}, { "size_text": "Large", "quantity": 0}, ] }
    }
    
  render() {
    return (<div>{Object.keys(this.state).map(k => {
      return <div>{k}<div>{
        this.state[k].map(o => <div className={'left'}>{`${o.size_text} has ${o.quantity} in stock`}</div>)
      }</div></div>
    })}</div>)
  }
}
ReactDOM.render(<Products />, document.getElementById('root'));

.left {
    margin-left: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

【讨论】：

【解决方案2】：

好吧，我会这样做的。

您可以检查console 以获取所需格式的记录值。

现在，我希望您可以自己在模板中添加这些值 :)

谢谢

var stock = {
        "myShirt": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ],
         "myShirt2": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 1,
             },
         ],
         "myShirt3": [
             {
                 "size": "Small",
                 "quantity": 0,
             },
             {
                 "size": "Medium",
                 "quantity": 0,
             },
             {
                 "size": "Large",
                 "quantity": 0,
             },
         ]
    }
    
    Object.keys(stock).map(e=>{
      console.log(e+":");
       stock[e].map(o=> console.log(o.size +" has "+o.quantity+" in stock"))
    })

【讨论】：

【解决方案3】：

感谢大家的cmets！

为了解决这个问题，我使用了两个答案的组合，并使我的渲染函数看起来像这样：

render() {
    return (
        <div id="product-container">{Object.keys(this.state.data).map(productId => {
            return <div id="product-info">
                <h2>{productId}</h2>
                <div id="product-line-detail">{
                    this.state.data[productId].map(productDetail => <div className={'left'}>{`${productDetail.size_text} has ${productDetail.quantity} in stock`}</div>)
                }
                </div>
            </div>
        })}
        </div>
    )
}

【讨论】：