Reactjs组件 - 循环遍历json对象 - 不呈现标记

Question

我试图循环遍历这个json来呈现一组段落 - 虽然当我获得内部循环的访问权限时 - 标记不会呈现 - 它只是空白？

我可以使用控制台日志读取对象详细信息 - 但渲染标记似乎没有影响 - 它是否已丢失范围？

这里的目标是渲染一批由这个json驱动的句子，以便回想起来。

Score for emotional distress and hyperactivity and concentration is close to the average 
Score for behavioural difficulties is slightly raised
Score for peer difficulties and overall stress is very high 

Score for kind and helpful behaviour is very low

的Json

"contents": {
                "1": {
                  "1": {
                    "alert": "green",
                    "values": ["emotional distress", "hyperactivity and concentration"],
                    "label": "close to the average"
                  },
                  "2": {
                    "alert": "yellow",
                    "values": ["behavioural difficulties"],
                    "label": "slightly raised"
                  },
                  "4": {
                    "alert": "red",
                    "values": ["peer difficulties", "overall stress"],
                    "label": "very high"
                  }
                },
                "2": {
                  "4": {
                    "alert": "red",
                    "values": ["kind and helpful behaviour"],
                    "label": "very low"
                  }
                }
              }

组件。

var YourCurrentStanding = React.createClass({

    createSentence : function(array) {
      if (array.length === 1) {
        return array[0];
      } else if (array.length === 0) {
        return "";
      }
      return array.slice(0, array.length - 1).join(", ") + " and " + array[array.length - 1];
    },

    render: function() {
      var that = this;

      return (
        <div className="component-container">
          {
            Object.keys(this.props.data.contents).map((key, i) => {      

              console.log("key", key);
              console.log("index", i);

              var ordered = this.props.data.contents[key];
              var that = this;

              return (
                <div className="bands" key={i}>
                  {
                    Object.keys(ordered).map(function(key) {
                        console.log(key);          // the name of the current key.
                        console.log(ordered[key]);   // the value of the current key.
                           return (
                            <p className="large-text margin-bottom">Score for {that.createSentence(ordered[key].values)} is <b className={ordered[key].alert+"-text"}>{ordered[key].label}</b></p>
                          ); 
                    })
                  }

                </div>
              )

            })
          }
        </div>
      );
    }
});

当前演示

var data = {
  contents: {
    "1": {
              "1": {
                "alert": "green",
                "values": ["emotional distress", "hyperactivity and concentration"],
                "label": "close to the average"
              },
              "2": {
                "alert": "yellow",
                "values": ["behavioural difficulties"],
                "label": "slightly raised"
              },
              "4": {
                "alert": "red",
                "values": ["peer difficulties", "overall stress"],
                "label": "very high"
              }
            },
            "2": {
              "4": {
                "alert": "red",
                "values": ["kind and helpful behaviour"],
                "label": "very low"
              }
            }
  }
};



var YourCurrentStanding = React.createClass({

createSentence : function(array) {
  if (array.length === 1) {
    return array[0];
  } else if (array.length === 0) {
    return "";
  }
  return array.slice(0, array.length - 1).join(", ") + " and " + array[array.length - 1];
},
   
render: function() {
  var that = this;

  return (
    <div className="component-container">
      {
        Object.keys(data.contents).map((key, i) => {      
      
          console.log("key", key);
          console.log("index", i);
          
          var ordered = data.contents[key];
          var that = this;

          return (
            <div className="bands" key={i}>
              {
                Object.keys(ordered).map(function(k, j) {
                    console.log(k);          // the name of the current key.
                    console.log(ordered[k]);   // the value of the current key.
                       return (
                        <p key={j} className="large-text margin-bottom">Score for {that.createSentence(ordered[k].values)} is <b className={ordered[k].alert+"-text"}>{ordered[k].label}</b></p>
                      ); 
                })
              }

            </div>
          )
          
        })
      }
    </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"/>

-

问题1 -

在我的构建中 - 它呈现不同的段落而不是连接句子。

Answer 1

尝试使用Object.keys(ordered).map代替Object.keys(ordered).forEach。