如何在我的反应组件中呈现 json？答案

【问题标题】：How do I render json in my react component?如何在我的反应组件中呈现 json？
【发布时间】：2017-08-14 09:31:36
【问题描述】：

我将以下 json 文件导入到我的组件中：

import { beer, wine, spririts, alcopop } from '../../config/calculator.json';

如何在我的render 中使用 json？

根据选择的内容，我想使用每个元素的数据，如果用户点击啤酒，则显示啤酒的数据。例如，我将如何遍历“啤酒”中的“尺寸”？到目前为止，这是我的代码：

   {[drinkType].sizes.map((option, i) =>
          <div value={option.id} key={i}>
         {option}
          </div>
        )}

我想显示尺寸名称、品脱、瓶子、罐头等

我收到错误：无法读取未定义的属性“地图”

//calculator.json
{
    "beer": {
        "name": "Beer or cider",
        "sizes": {
            "568": {
                "name": "Pint",
                "size": 0.568,
                "id": "pint",
                "max": 10,
                "icon": "beer_pint"
            },
            "440": {
                "name": "Can",
                "size": 0.44,
                "id": "can",
                "max": 10,
                "icon": "beer_can"
            },
            "330": {
                "name": "Bottle",
                "size": "0.33",
                "id": "bottle",
                "max": "10",
                "icon": "beer_bottle_330"
            },
            "275": {
                "name": "Small bottle",
                "size": 0.275,
                "id": "smallBottle",
                "max": 10,
                "icon": "beer_bottle_275"
            }
        },
        "strength": [4, 4.5, 5, 6, 7, 8, 9]
    },
    "wine": {
        "name": "Wine or champagne",
        "sizes": {
            "125": {
                "name": "Small glass",
                "size": 0.125,
                "id": "small",
                "max": 10,
                "icon": "wine_small_glass"
            },
            "175": {
                "name": "Standard glass",
                "size": 0.175,
                "id": "std",
                "max": 10,
                "icon": "wine_standard_glass"
            },
            "250": {
                "name": "Large glass",
                "size": 0.25,
                "id": "large",
                "max": 10,
                "icon": "wine_large_glass"
            },
            "1000": {
                "name": "Bottle",
                "size": 1,
                "id": "bottle",
                "max": 10,
                "icon": "wine_bottle"
            }
        },
        "strength": [9, 10, 10.5, 11, 11.5, 12, 13, 14, 15, 16, 17]
    },
    "spirits": {
        "name": "Spirits or shots",
        "sizes": {
            "25": {
                "name": "Single",
                "size": 0.025,
                "id": "single",
                "max": 10,
                "icon": "spirit_single"
            },
            "35": {
                "name": "Large single",
                "size": 0.035,
                "id": "lgSingle",
                "max": 10,
                "icon": "spirit_large_single"
            },
            "50": {
                "name": "Double",
                "size": 0.05,
                "id": "double",
                "max": 10,
                "icon": "spirit_double"
            },
            "70": {
                "name": "Large double",
                "size": 0.07,
                "id": "lgDouble",
                "max": 10,
                "icon": "spirit_large_double"
            },
            "700": {
                "name": "Bottle",
                "size": 0.7,
                "id": "bottle700",
                "max": 3,
                "icon": "spirit_bottles"
            },
            "1000": {
                "name": "Bottle",
                "size": 1,
                "id": "bottle",
                "max": 3,
                "icon": "spirit_bottles"
            }
        },
        "strength": [37, 40]
    },
    "alcopop": {
        "name": "Alcopop",
        "sizes": {
            "275": {
                "name": "Small bottle",
                "size": 0.275,
                "id": "small",
                "max": 10,
                "icon": "alcopops_small_bottle"
            },
            "330": {
                "name": "Standard bottle",
                "size": 0.33,
                "id": "std",
                "max": 10,
                "icon": "alcopops_standard_bottle"
            },
            "750": {
                "name": "Large bottle",
                "size": 0.75,
                "id": "large",
                "max": 10,
                "icon": "alcopops_large_bottle"
            }
        },
        "strength": [5, 5.5]
    }
}

【问题讨论】：

你想显示一个特定的对象还是整个 json beer 对象
取决于点击了哪一个 - 所以如果点击啤酒，我会显示啤酒的所有尺寸
您将 JSON 文件作为变量导入，然后在渲染中操作数据。您需要使用 for 循环来遍历所有内容:)
如何循环遍历啤酒中的“尺寸”？
我认为您的示例还可以，唯一缺少的是在map 中您应该返回生成的 div。 return ( <div>... </div> );

标签： json reactjs

【解决方案1】：

.map 不适用于这样的对象， map() 仅适用于数组

相反，您可以将键存储在数组中并使用它们，例如，

    import jsonData from '../../config/calculator';
    ...
   //in constructor or any function
   let sizes;
   sizes={};
    for(let i of Object.keys(jsonData)){
         if(!sizes[i][0])sizes[i] = [];
         for(let j of Object.keys(i.sizes)){
           sizes[i].push(jsonData[i].sizes[j])
          }
      }
     this.setState({
         sizesArray:sizes
      })

现在您可以使用 this.state.sizesArray.map 来迭代大小，例如，

  {this.state.sizes[drinkType].map((option, i) =>
          <div value={option.id} key={i}>
         {option}
          </div>
        )}

【讨论】：

【解决方案2】：

首先，在组件中导入你的 json：

import jsonData from '../../config/calculator'; //specify the appropriate location of the json file

然后您可以通过各种方式访问组件中的“数据”。一种方法可能是：

constructor() {
 this.state = {
  data: []
 }
}

componentDidMount(){
  this.setState({data: jsonData});
}

因此，您可以使用此数据（this.state.data）。

【讨论】：

谢谢，我一直收到错误，无法读取未定义的属性“地图”，有什么想法吗？
您可能正在对未定义的对象执行映射。首先检查状态的数据，然后使用map这样：this.state.data.map((data) =>{})
感谢回复，我只需要输出对象的属性名称？有什么想法吗？
好的.. 你用上面的 cmets 更新了你的代码吗？你现在有什么错误吗？