代码之家 › 专栏 › 技术社区 › Bomber

如何在react组件中呈现json?

reactjs json

Bomber · 技术社区 · 7 年前

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

如何在我的 render

根据选择的内容,我希望使用每个元素的数据,如果用户单击啤酒,则显示啤酒的数据。例如,我如何循环“啤酒”中的“大小”?这是我目前的代码:

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

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

我得到错误:无法读取未定义的属性“map”

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

2 回复 | 直到 7 年前

Chaitanya Mankala 7 年前

.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。映射以迭代大小,例如,

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

Rohan Kangale 7 年前

首先,在组件内导入json:

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

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

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

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