प्रतिक्रिया में किसी ऑब्जेक्ट को कैसे लूप करें?

Question

प्रतिक्रिया करने के लिए नया और ऑब्जेक्ट विशेषताओं को लूप करने का प्रयास कर रहा है लेकिन प्रतिक्रिया के बारे में शिकायत शिकायत मान्य नहीं है बच्चे, क्या कोई मुझे इस समस्या को हल करने के बारे में कुछ सलाह दे सकता है? मैंने createFragment जोड़ा है लेकिन पूरी तरह से यह सुनिश्चित नहीं है कि इसे कहां जाना है या मुझे क्या दृष्टिकोण लेना चाहिए?

जे एस

var tifs = {1: 'Joe', 2: 'Jane'}; 
var tifOptions = Object.keys(tifs).forEach(function(key) { 
    return <option value={key}>{tifs[key]}</option> 
}); 

समारोह प्रस्तुत

render() { 
     const model = this.props.model; 

     let tifOptions = {}; 

     if(model.get('tifs')) { 
      tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) { 
       return <option value={key}>{this.props.model.get('tifs')[key]}</option> 
      }); 
     } 

     return (
      <div class={cellClasses}> 

        <div class="grid__col-5 text--center grid__col--bleed"> 
         <h5 class="flush text--uppercase">TIF</h5> 
         <select id="tif" name="tif" onChange={this.handleChange}> 
          {tifOptions} 
         </select> 
        </div> 

      </div> 
     ); 
    } 

सांत्वना

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) 

Answer 1

करने में त्रुटि समस्या जिस तरह से आप forEach() का उपयोग कर रहे है, क्योंकि यह ALW होगा Ays वापसी undefined।

var tifOptions = []; 

Object.keys(tifs).forEach(function(key) { 
    tifOptions.push(<option value={key}>{tifs[key]}</option>); 
}); 

अद्यतन:

var tifOptions = Object.keys(tifs).map(function(key) { 
    return <option value={key}>{tifs[key]}</option> 
}); 

आप अभी भी forEach() का उपयोग करना चाहते हैं, तो आप कुछ इस तरह कर दिया था: आप शायद map() विधि है, जो एक नई सरणी रिटर्न के लिए देख रहे :

:

आप ES6 लिख रहे हैं, तो आप एक ही बात एक arrow function का उपयोग कर neater थोड़ा पूरा कर सकते हैं

const tifOptions = Object.keys(tifs).map(key => 
    <option value={key}>{tifs[key]}</option> 
) 

यहाँ सभी विकल्पों को ऊपर उल्लेख दिखा एक बेला है: https://jsfiddle.net/fs7sagep/

Answer 2

मैं अत्यधिक आप एक वस्तु है, तो आप कर रहे हैं के बजाय एक सरणी का उपयोग करने का सुझाव देते हैं itteration प्रतिक्रिया है, यह एक वाक्य रचना मैं इसका इस्तेमाल OFEN है।

const rooms = this.state.array.map((e, i) =>(<div key={i}>{e}</div>)) 

तत्व का उपयोग करने के लिए, बस अपने जेएसएक्स में {rooms} रखें।

जहां ई = तत्वों के तत्व = i = अनुक्रमणिका। here और पढ़ें। यदि आप पुनरावृत्ति की तलाश में हैं, तो यह करने का यह तरीका है।