Reactjs循環通過數組和開關

Question

我有一個reactjs組件，我試圖用循環和開關來呈現數據。

我試了一個地圖，然後forEach - 但它聲稱它不是一個函數。

json看起來像這樣。

// JSON

"contents": { 
      "0": ["emotional distress", "behavioural difficulties", "hyperactivity and concentration difficulties", "difficulties in getting along with other young people"], 
      "5": ["kind and helpful behaviour"] 
     } 

//組件

var YourCurrentStanding = React.createClass({ 

    alertLevel: function (key) { 
     switch (key) { 
     case '0': return "very high"; 
     case '1': return "high"; 
     case '5': return "very low"; 
     default: return "xy"; 
     } 
    }, 

    render: function() { 
     console.log('this.props.data.contents', this.props.data.contents) 
     return (
      <div> 
       { 
        this.props.data.contents.forEach(function(j) { 
        return <p key={j}>Score for x,y and z {this.alertLevel(j)}</p> 
        }) 
       } 
      </div> 
     ); 
    } 
}); 

-----------應該象

"<p>Score for emotional distress, behavioural difficulties, hyperactivity and concentration difficulties very high and difficulties in getting along with other young people very high</p> 

<p>Score for kind and helpful behaviour very low</p>" 

---

附近工作代碼添加了語法檢查

var YourCurrentStanding = React.createClass({ 

    grammarCheck : function(vals) { 
     //x,y,z and d 
     //z 

     return vals.join(', ') 
    }, 


    alertLevel: function(key) { 
     switch (key) { 
     case "0": 
      return "very high"; 
     case "1": 
      return "high"; 
     case "5": 
      return "very low"; 
     default: 
      return "xy"; 
     } 
    }, 

    render: function() { 
     return (
     <div> 
     {Object.keys(this.props.data.contents).map((key, index) => {  
      return <p key={index}>Score for {this.grammarCheck(this.props.data.contents[key])} is <b>{this.alertLevel(key)}</b></p> 
     })} 
     </div> 
    ); 
    } 
}); 

Answer 1

這就是：（拿了樣品數據對象演示）

var data = { 
 
    contents: { 
 
    "0": [ 
 
     "emotional distress", 
 
     "behavioural difficulties", 
 
     "hyperactivity and concentration difficulties", 
 
     "difficulties in getting along with other young people" 
 
    ], 
 
    "5": ["kind and helpful behaviour"] 
 
    } 
 
}; 
 

 
var YourCurrentStanding = React.createClass({ 
 
    alertLevel: function(key) { 
 
    switch (key) { 
 
     case "0": 
 
     return "very high"; 
 
     case "1": 
 
     return "high"; 
 
     case "5": 
 
     return "very low"; 
 
     default: 
 
     return "xy"; 
 
    } 
 
    }, 
 
    
 
    joinContents: function(data, key) { 
 
    return [ data[key].slice(0, -1).join(", "), data[key].slice(-1)[0]   
 
      ].join(data[key].length < 2 ? "" : " and "); 
 
     
 
    /* 
 
    data[key].slice(0, -1).join(", "): takes all keys except last and joins them together with a comma. 
 
    data[key].slice(-1)[0]: Last key 
 
    */ 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <div> 
 
     {Object.keys(data.contents).map((key, index) => { 
 
      return (
 
      <p key={index}> 
 
       Score for {this.joinContents(data.contents, key)} is {" "} 
 
       <b>{this.alertLevel(key)}</b> 
 
      </p> 
 
     ); 
 
     })} 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
ReactDOM.render(<YourCurrentStanding />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"/>

Answer 2

只需使用這種方式的箭頭功能。正如@cesar william所說，照顧對象屬性的映射。

render: function() { 
    console.log('this.props.data.contents', this.props.data.contents) 
    return (
     <div> 
      { 
       Object.keys(this.props.data.contents).map((key, index) => 
       { 
       return <p key={index}>Score for xx {this.alertLevel(this.props.data.contents[j])}</p> 
       }) 
      } 
     </div> 
    ); 
} 

我真的沒看你的jsx段落，但這是一個好的開始。

編輯：你不應該使用索引爲重點，找到適合更好的，它只是爲例子

Answer 3

您無法通過forEach或map方法來迭代對象。

const contentKeys = Object.keys(this.props.data.contents); 
contentKeys.map(function(key, index) { 
    const item = this.props.data.contents[index]; 
    return <p key={index}>Score for xx {this.alertLevel(item)}{index !== contentKeys.length-1 ? ', ' : null}</p> 
}); 

使用索引或項調用alertLevel方法 - 取決於您。