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。