React JSX : 해시를 통해 반복하고 각 키에 대한 JSX 요소 반환

React JSX : 해시를 통해 반복하고 각 키에 대한 JSX 요소 반환

---

해시의 모든 키를 반복하려고하는데 루프에서 출력이 반환되지 않습니다. console.log()예상대로 출력됩니다. JSX가 반환되지 않고 올바르게 출력되는 이유는 무엇입니까?

var DynamicForm = React.createClass({
  getInitialState: function() {
    var items = {};
    items[1] = { name: '', populate_at: '', same_as: '', 
                 autocomplete_from: '', title: '' };
    items[2] = { name: '', populate_at: '', same_as: '', 
                 autocomplete_from: '', title: '' };
    return {  items  };
  },



  render: function() {
    return (
      <div>
      // {this.state.items.map(function(object, i){
      //  ^ This worked previously when items was an array.
        { Object.keys(this.state.items).forEach(function (key) {
          console.log('key: ', key);  // Returns key: 1 and key: 2
          return (
            <div>
              <FieldName/>
              <PopulateAtCheckboxes populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }

---

Object.keys(this.state.items).forEach(function (key) {

Array.prototype.forEach()아무것도 반환하지 않습니다- .map()대신 사용하십시오.

Object.keys(this.state.items).map(function (key) {
  var item = this.state.items[key]
  // ...

---

단축키는 다음과 같습니다.

Object.values(this.state.items).map({
  name,
  populate_at,
  same_as,
  autocomplete_from,
  title
} => <div key={name}>
        <FieldName/>
        <PopulateAtCheckboxes populate_at={data.populate_at} />
     </div>);

참조 URL : https://stackoverflow.com/questions/29534224/react-jsx-iterating-through-a-hash-and-returning-jsx-elements-for-each-key