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

这里是：（以示例 data 对象进行演示）

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 方法 - 由您决定。