Question

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

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

如何在render中使用json？

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

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

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

我收到错误：无法读取属性＆＃39; map＆＃39;未定义的

//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]
    }
}

Answer 1

首先，在组件中导入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）。

Answer 2

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

如何在反应组件中渲染json？

2 个答案: