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

嗯，我会这样做的。

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

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

由于

＆＃13;

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"))
    })

＆＃13;

Answer 2

您可以使用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>

Answer 3

感谢大家的评论！

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

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>
    )
}

使用ReactJS显示JSON多维数组数据并映射

3 个答案: