javascript - 使用ReactJS和map显示JSON多维数组数据

Question

我有一些多维 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>
    );
}

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

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

谢谢!

Answer 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>