Wie schleift man ein Objekt in React?

Question

Neu zu Reagieren und zu versuchen, Objektattribute zu loopen, aber Reaction beschwert sich über Objekte, die nicht gültig sind. Reaction children, kann mir bitte jemand einen Rat geben, wie man dieses Problem löst? Ich habe createFragment hinzugefügt, bin mir aber nicht ganz sicher, wohin das gehen soll oder welchen Ansatz ich wählen sollte?

JS

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

Render-Funktion

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

Fehler in der Konsole

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

Answer 1

Das Problem ist die Art und Weise Sie forEach() verwenden, wie es wird ALW ays zurück undefined. Sie suchen wahrscheinlich für die map() Methode, die ein neues Array zurück:

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

Wenn Sie noch forEach() verwenden möchten, würden Sie haben, so etwas zu tun:

var tifOptions = []; 

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

-Update :

:

Wenn Sie ES6 schreiben, können Sie die gleiche Sache etwas sauberere mit einem arrow function erreichen

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

Hier ist eine Geige zeigt alle oben genannten Optionen: https://jsfiddle.net/fs7sagep/

Answer 2

ich sehr empfehlen Sie ein Array zu verwenden, anstatt eines Objekts, wenn Sie tun, reagieren itteration, ist dies eine Syntax ich es ofen verwenden.

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

Um das Element zu verwenden, nur {rooms} in Ihrem jsx platzieren.

Wobei e = Elemente der Arrays und i = Index des Elements. Lesen Sie mehr here. Wenn Sie nach Iteration suchen, ist dies der Weg, es zu tun.