प्रतिक्रिया जेएसएक्स: एक हैश के माध्यम से इटरेट करना और प्रत्येक कुंजी

Question

के लिए जेएसएक्स तत्वों को लौटाना मैं हैश में सभी चाबियों के माध्यम से फिर से प्रयास करने की कोशिश कर रहा हूं, लेकिन लूप से कोई आउटपुट वापस नहीं किया जाता है। अपेक्षित के रूप में console.log() आउटपुट। कोई विचार क्यों जेएसएक्स वापस नहीं किया गया है और सही आउटपुट किया गया है?

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() कुछ भी वापस नहीं करता है - के बजाय .map() का उपयोग करें:

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

Answer 2

एक शॉर्टकट होगा:

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