Javascript - switch case - reactjs bug？

Question

我有一個像這樣的數據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;  
    } 

---

全片

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') 
); 

Answer 1

你缺少了 '休息' 的語句。 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;  
}