Javascript-switch-case-reactjs错误？

我有一个类似这样的数据json

var config = [{
  "craft-breweries": {
    "count": 5,
    "latest": "The Wimbledon Brewery Company Limited",
    "data": [{
      "title": "Belleville Brewing Company",
      "start": 2013
    }, {
      "title": "Kew Brewery",
      "start": 2015
    }, {
      "title": "Laines Brewery (Four Thieves)",
      "start": 2015
    }, {
      "title": "Sultan Brewery",
      "start": 2015
    }, {
      "title": "The Wimbledon Brewery Company Limited",
      "start": 2015
    }]
  },
  "farmer-markets": {
    "count": 5
  },
  "pie-markets": {
    "count": 8
  }
 }];

--如果密钥存在，我将尝试动态附加组件

因此调用了一个名为getLayers的函数。它在json中循环——但是开关大小写似乎满足循环的键

类似案例：“农民市场”

中国的“农贸市场”和“馅饼市场”？是因为开关盒不喜欢炒作吗

getLayers: function(data){
      var items = [];
      var j = 0;
      for (var layer in data) {
          console.log("layer------->", layer);

          switch (layer) {
            case 'craft-breweries':
              console.log("craft-breweries");
              items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
            case 'farmer-markets':
              console.log("farmer-markets");
              items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
            case 'pie-markets':
              console.log("pie-markets");
              items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);  
          }

          console.log("j", j);
          j++;

      }

      console.log("items", items);
      return items;      
    }

getLayers:函数（数据）{
var项目=[]；
var j=0；
用于（数据中的var层）{
console.log（“层------->”，层）；
交换机（层）{
案例“手工酿酒厂”：
控制台日志（“工艺酿酒厂”）；
items.push（）；
“农贸市场”案例：
console.log（“农贸市场”）；
items.push（）；
“馅饼市场”案例：
console.log（“馅饼市场”）；
items.push（）；
}
console.log（“j”，j）；
j++；
}
控制台日志（“项目”，项目）；
退货项目；
}

---

整块

import React from 'react';
import ReactDOM from 'react-dom';
//import App from './App';
import './index.css';



var config = [{
  "craft-breweries": {
    "count": 5,
    "latest": "The Wimbledon Brewery Company Limited",
    "data": [{
      "title": "Belleville Brewing Company",
      "start": 2013
    }, {
      "title": "Kew Brewery",
      "start": 2015
    }, {
      "title": "Laines Brewery (Four Thieves)",
      "start": 2015
    }, {
      "title": "Sultan Brewery",
      "start": 2015
    }, {
      "title": "The Wimbledon Brewery Company Limited",
      "start": 2015
    }]
  },
  "farmer-markets": {
    "count": 5
  },
  "pie-markets": {
    "count": 8
  }
 }];


var MultipleComponents = React.createClass({


    getLayers: function(data){
      var items = [];
      var j = 0;
      for (var layer in data) {
          console.log("layer------->", layer);

          switch (layer) {
            case 'craft-breweries':
              console.log("craftbreweries");
              items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
            case 'farmer-markets':
              console.log("farmermarkets");
              items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
            case 'pie-markets':
              console.log("piemarkets");
              items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);
            default: 

          }

          console.log("j", j);
          j++;

      }

      console.log("items", items);
      return items;      
    },


    render: function () {
       var config = this.props.config;

       console.log("config", config);

       return (
            <div className="apps">
                {this.getLayers(config[0])}
            </div>
        );
    }
});



var CraftBreweries = React.createClass({
    componentDidMount: function () {
        //var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3");
        // set el height and width etc.
    },
    render: function () {
        var props = this.props.config; 
        return (
            <div className="craftbreweries" data-role="craftbreweries">
                You have {props.count} number of breweries in your area. The latest one is {props.latest}.
            </div>
        );
    }
});

var FarmerMarket = React.createClass({
    componentDidMount: function () {
        //var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3");
        // set el height and width etc.
    },
    render: function () {
        var props = this.props.config; 
        return (
            <div className="farmermarket" data-role="farmermarket">
                You have {props.count} number of farmer markets in your area.
            </div>
        );
    }
});


var PieMarket = React.createClass({
    componentDidMount: function () {
        //var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3");
        // set el height and width etc.
    },
    render: function () {
        var props = this.props.config; 
        return (
            <div className="piemarket" data-role="piemarket">
                You have {props.count} number of pie markets in your area.
            </div>
        );
    }
});


ReactDOM.render(
    <MultipleComponents config={config} />,
    document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
//从“./App”导入应用程序；
导入“./index.css”；
变量配置=[{
“手工酿酒厂”：{
“计数”：5，
“最新”：“温布尔登啤酒厂有限公司”，
“数据”：[{
“名称”：“贝尔维尔酿酒公司”，
“启动”：2013年
}, {
“名称”：“丘酿酒厂”，
“启动”：2015年
}, {
“头衔”：“莱恩啤酒厂（四贼）”，
“启动”：2015年
}, {
“头衔”：“苏丹啤酒厂”，
“启动”：2015年
}, {
“头衔”：“温布尔登啤酒厂有限公司”，
“启动”：2015年
}]
},
“农贸市场”：{
“计数”：5
},
“馅饼市场”：{
“计数”：8
}
}];
var MultipleComponents=React.createClass({
getLayers:函数（数据）{
var项目=[]；
var j=0；
用于（数据中的var层）{
console.log（“层------->”，层）；
交换机（层）{
案例“手工酿酒厂”：
控制台日志（“工艺酿酒厂”）；
items.push（）；
“农贸市场”案例：
console.log（“农贸市场”）；
items.push（）；
“馅饼市场”案例：
控制台日志（“piemarkets”）；
items.push（）；
违约：
}
console.log（“j”，j）；
j++；
}
控制台日志（“项目”，项目）；
退货项目；
},
渲染：函数（）{
var config=this.props.config；
log（“config”，config）；
返回(
{this.getLayers（配置[0]）}
);
}
});
var CraftBreweries=React.createClass({
componentDidMount:函数（）{
//var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
渲染：函数（）{
var props=this.props.config；
返回(
你所在地区有{props.count}家啤酒厂。最近的一家是{props.latest}。
);
}
});
var FarmerMarket=React.createClass({
componentDidMount:函数（）{
//var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
渲染：函数（）{
var props=this.props.config；
返回(
你所在地区有{props.count}个农贸市场。
);
}
});
var PieMarket=React.createClass({
componentDidMount:函数（）{
//var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
渲染：函数（）{
var props=this.props.config；
返回(
你所在地区有{props.count}个馅饼市场。
);
}
});
ReactDOM.render(
,
document.getElementById（'root'））
);

您缺少“break”语句。switch case不是if-else功能，它将继续，直到找到中断或结束。至于你的例子，它将进入“农贸市场”，由于没有中断声明，它也将继续进入“馅饼市场”。您的开关盒应为：

getLayers: function(data){
  var items = [];
  var j = 0;
  for (var layer in data) {
      console.log("layer------->", layer);

      switch (layer) {
        case 'craft-breweries':
          console.log("craft-breweries");
          items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
          break;
        case 'farmer-markets':
          console.log("farmer-markets");
          items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
          break;
        case 'pie-markets':
          console.log("pie-markets");
          items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);  
          break;
        default:
          console.log("no matches found for layer:", layer);
          break;

      }

      console.log("j", j);
      j++;

  }

  console.log("items", items);
  return items;      
}

getLayers:函数（数据）{
var项目=[]；
var j=0；
用于（数据中的var层）{
console.log（“层------->”，层）；
交换机（层）{
案例“手工酿酒厂”：
控制台日志（“工艺酿酒厂”）；
items.push（）；
打破
“农贸市场”案例：
console.log（“农贸市场”）；
items.push（）；
打破
“馅饼市场”案例：
console.log（“馅饼市场”）；
items.push（）；
打破
违约：
log（“未找到层：，层的匹配项”）；
打破
}
console.log（“j”，j）；
j++；
}
控制台日志（“项目”，项目）；
退货项目；
}

您缺少“break”语句。switch case不是if-else功能，它将继续，直到找到中断或结束。至于你的例子，它将进入“农贸市场”，由于没有中断声明，它也将继续进入“馅饼市场”。您的开关盒应为：

getLayers: function(data){
  var items = [];
  var j = 0;
  for (var layer in data) {
      console.log("layer------->", layer);

      switch (layer) {
        case 'craft-breweries':
          console.log("craft-breweries");
          items.push(<CraftBreweries key={j} config={config[0]["craft-breweries"]} />);
          break;
        case 'farmer-markets':
          console.log("farmer-markets");
          items.push(<FarmerMarket key={j} config={config[0]["farmer-markets"]} />);
          break;
        case 'pie-markets':
          console.log("pie-markets");
          items.push(<PieMarket key={j} config={config[0]["pie-markets"]} />);  
          break;
        default:
          console.log("no matches found for layer:", layer);
          break;

      }

      console.log("j", j);
      j++;

  }

  console.log("items", items);
  return items;      
}

getLayers:函数（数据）{
var项目=[]；
var j=0；
用于（数据中的var层）{
console.log（“层------->”，层）；
交换机（层）{
案例“手工酿酒厂”：
控制台日志（“工艺酿酒厂”）；
items.push（）；
打破
“农贸市场”案例：
console.log（“农贸市场”）；
items.push（）；
打破
“馅饼市场”案例：
console.log（“馅饼市场”）；
items.push（）；
打破
违约：
log（“未找到层：，层的匹配项”）；
打破
}