2016-07-07 22 views
0

Ich react-select und will Schleife durch ein Objekt unter Verwendung darzustellen, die sie als die Wert der Auswahl und Label:innerhalb eines Arrays Objekts Looping

// Inside the component's render: 

var myVar = [ 
    this.props.foo.forEach(function(a){ 
    {value: a.name, label: a.name} // line 83 
    }) 
]; 

//return 

<Select ref="stateSelect" options={myVar} simpleValue clearable={this.state.clearable} 
    name="" 
    value={this.state.bar} onChange={this._myFunc} 
/> 

this._myFunc für diese Frage nicht relevant ist. Ich möchte so etwas bekommen:

var myVar = [ 
    {value: "hello", label: "world"}, 
    // the list goes on 
]; 

Mit dem obigen Code, ich habe:

Parse Error: Line 83: Unexpected token :

Ich bin nicht so stark mit JavaScript, um diese Lösung, um herauszufinden, aber ist das möglich? Links zum Nachlesen?

+1

'{...}' ist hier als ** Block ** betrachtet. Wahrscheinlich brauchen Sie 'someObj = {value: a.name, label: a.name}' – Tushar

Antwort

2

Wenn Sie beabsichtigen myVar mit einer Reihe von Objekten aus this.props.foo dann zu initialisieren versuchen

var myVar = this.props.foo.map(function(a){ 
    return {value: a.name, label: a.name} ; 
}); 
+0

Fehlgeschlagen propType: Ungültige prop 'option' vom Typ' array' wird an 'Option', erwartet' object' übergeben. Überprüfen Sie die Rendermethode von 'Select'. – Sylar

+0

@Sylar erhalten Sie immer noch 'Parse Error: Zeile 83: Unerwartetes Token:'? Was haben Sie von dieser Aussage erwartet? – gurvinder372

+0

Fehler wie in meinem ersten Kommentar erhalten. In meiner Frage, wo 'die Liste geht ', das ist, was funktioniert, aber ich brauche den Wert und Label aus einem Array. – Sylar

1

Das Beste ist Schleife in fct wie folgt machen:

render(){ 
return (
    <div> 
    <Select 
    ref="stateSelect" 
    options={ 
     this.props.foo.map((a) => {name: a.name, label: a.name}) 
    } 
    simpleValue 
    clearable={this.state.clearable} 
    name="" 
    value={this.state.bar} 
    onChange={this._myFunc} 
    /> 
    </div>); 
} 
+0

Ist das es6? "Fetter Pfeil"? Vielleicht nützlich in anderen Projekten. – Sylar

+1

Ja es6 mit jsx. Sie können in es5 map (function (a) {return {name: a.name, label: a.name}}) verwenden –

Verwandte Themen