Wie schleife ich ein Objekt in React?

Neu in React und der Versuch, Objektattribute zu schleifen, aber React beschwert sich darüber, dass Objekte nicht gültig sind. React-Kinder. Kann mir bitte jemand einen Rat geben, wie dieses Problem behoben werden kann? Ich habe createFragment hinzugefügt, bin mir aber nicht ganz sicher, wohin das führen soll oder welchen Ansatz ich wählen soll.

JS

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

Renderfunktion

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)

Das Problem ist die Art und Weise forEach(), wie Sie es verwenden , da es immer wieder auftritt undefined. Sie suchen wahrscheinlich nach der map()Methode, die ein neues Array zurückgibt:

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

Wenn Sie noch verwenden möchten forEach(), müssen Sie Folgendes tun:

var tifOptions = [];

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

Aktualisieren:

Wenn Sie ES6 schreiben, können Sie die gleiche Sache ein bisschen ordentlicheres mit einer vollenden Pfeil Funktion :

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

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

Sie können es kompakter verwenden als:

var tifs = {1: 'Joe', 2: 'Jane'};
...

return (
   <select id="tif" name="tif" onChange={this.handleChange}>  
      { Object.entries(tifs).map((t,k) => <option key={k} value={t[0]}>{t[1]}</option>) }          
   </select>
)

Und noch ein etwas anderer Geschmack:

 Object.entries(tifs).map(([key,value],i) => <option key={i} value={key}>{value}</option>)  

Sie können auch einfach ein return div wie das folgende verwenden und die integrierten Vorlagenliterale von Javascript verwenden:

const tifs = {1: 'Joe', 2: 'Jane'};

return(

        <div>
            {Object.keys(tifOptions).map((key)=>(
                <p>{paragraphs[`${key}`]}</p>
            ))}
        </div>
    )

const tifOptions = [];

for (const [key, value] of Object.entries(tifs)) {
    tifOptions.push(<option value={key} key={key}>{value}</option>);
}

return (
   <select id="tif" name="tif" onChange={this.handleChange}>  
      { tifOptions }          
   </select>
)

Ich empfehle Ihnen dringend, ein Array anstelle eines Objekts zu verwenden, wenn Sie eine Reaktionsiteration durchführen. Dies ist eine Syntax, die ich oft verwende.

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

Um das Element zu verwenden, platzieren Sie es einfach {rooms}in Ihrem jsx.

Wobei e = Elemente der Arrays und i = Index des Elements. Lesen Sie hier mehr . Wenn Sie nach Iteration suchen, ist dies der richtige Weg.