React JSX: Lặp lại thông qua hàm băm và trả về các phần tử JSX cho mỗi khóa

Question

Tôi đang cố gắng lặp qua tất cả các khóa trong một băm, nhưng không có đầu ra nào được trả về từ vòng lặp. console.log() kết quả đầu ra như mong đợi. Bất kỳ ý tưởng tại sao JSX không được trả lại và xuất ra đúng?

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> 
    ); 
    } 

Answer 1

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

Array.prototype.forEach() không trả lại bất cứ điều gì - sử dụng .map() thay vì:

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

Answer 2

một phím tắt sẽ là:

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>);