如何在 React 中使用 JSX 映射多个对象数组？

Question

我有一些json数据：

{
    "shops" : 
        [
            {
                "type" : "Blacksmith/Armoury",
                "items_light_armour" : 
                [
                    "Light Armour",
                    {
                        "id": 1,
                        "item" : "Padded Armour", 
                        "low_price": 15, 
                        "med_price": 20, 
                        "high_price": 30,
                        "available": true,
                        "limited": false,
                        "weight": 8,
                        "blurb": "AC11. Made of quilted layers of cloth and batting."
                    },
//...
//three other objects, as array elements, with a similar set of key/value pairs

第一个元素（在 items_light_armour 数组内）只是一个字符串，用于表示每个数据集的类别。

我想做的是在我拥有的 table 中显示每个对象（除了它的 ID 和简介）。 table 为映射的每个项目生成新行。我遇到的问题是它没有按预期映射数据。

这是 table 首次加载时的样子的图片：

所以数据确实映射到 table，但只是每个对象数组中的第一项。老实说，我不确定如何获取每个类别的所有数据。具体来说，每个类别都应该列出它的所有项目，然后会打开一个新类别，像第一个一样列出它的所有条目，依此类推，直到到达数组的末尾，而不是像上面显示的那样从每个条目中列出一个。

以下是我从 JSON 文件（在组件中的 return 块上方）获取数据的方法：

//get the json data
    const jsonData = require("../Reference Files/Json Files/shops.json");

然后，我将其转换为 const

    const objInnerValues = Object.values(jsonData.shops[0])

然后，在我的组件的 return 块中，我是这样 'fill' table 行的。编辑：这是最新的代码，遵循@John 的建议：

//...
{
    <>
    objInnerValues.map((things, outerIndex) => (
        {outerIndex === 0 ? console.log("outerIndex WAS 0"): 
        <TableRow key= {outerIndex} onClick={() => BarkItemBlurb(outerIndex)}>

                                        {Object.values(things).map((eachThing, innerIndex) => (      
    {innerIndex == 0 ? console.log("innerIndex or outerIndex was 0"): 
    <>
        <SuperTD key={innerIndex}>{eachThing.item}</SuperTD>    
        <SuperTD key={innerIndex+1}>{eachThing.weight}lbs</SuperTD>  
        <SuperTD key={innerIndex+2}>{eachThing.low_price}gp</SuperTD> 
        <SuperTD key={innerIndex+3}>{eachThing.med_price}gp</SuperTD> 
        <SuperTD key={innerIndex+4}>{eachThing.high_price}gp</SuperTD> 
    </>
    })
    </TableRow>
    })
    </>
}
//...

我正在使用样式组件，因此使用了奇怪的 html 标签名称。

如有任何建议，我们将不胜感激。

Answer 1

这大概就是你想要的。当你得到东西时，你会映射它，你不需要索引它，因为每个东西都是实际的对象。

{
   objInnerValues.map((things, i) => (
     
       {things.map((eachThing) => (
        <TableRow key= {i} onClick={() => BarkItemBlurb(i)}>  
          <SuperTD>{eachThing.item}</SuperTD>
          <SuperTD>{eachThing.weight}lbs</SuperTD>
          <SuperTD>{eachThing.low_price}gp</SuperTD>
          <SuperTD>{eachThing.med_price}gp</SuperTD>
          <SuperTD>{eachThing.high_price}gp</SuperTD>
       </TableRow>
       )}
    ))}

由于缺少工作代码，我没有运行；我可能有错误的 brackets/closing 个括号，也可能放在错误的位置，但总的来说它应该会指导您找到解决方案。

Answer 2

感谢@John 的协助。

我的设计过于复杂了。我的 JSON 文件包含数组和对象，导致导航不便。

将其重组为仅包含数组后，就容易多了。

此外，至于实际问题，有人告诉我我需要在原来的地图函数中添加另一个地图函数，以使其以正确的方式吐出数据。

//...
Object.values(thing).map((innerThing, innerIndex) => (
    <>
        {console.log("\nouter/inner: "+outerIndex +", " +innerIndex)}
        {console.log("\nData: \n\t"+innerThing[2] +"\n\t" +innerThing[8] + "\n\t" +innerThing[3]+"\n\t" + innerThing[4]+"\n\t"+innerThing[5])}
        <TableRow key = {thing[0].toString()}>
            <SuperTD>{innerThing[2]}</SuperTD>
            <SuperTD>{innerThing[8]}lbs</SuperTD>
            <SuperTD>{innerThing[3]}gp</SuperTD>
            <SuperTD>{innerThing[4]}gp</SuperTD>
            <SuperTD>{innerThing[5]}gp</SuperTD>
        </TableRow>
    </>
//...

现在，映射排序后，结果如下：

如何在 React 中使用 JSX 映射多个对象数组？

How can I map through several arrays of objects using JSX in React?

javascript

jsx

reactjs