Achtung: Jede Verwendung eines Schlüssel Objekt sollte

Question

Ich sehe nicht, gewickelt werden, was mit meinem Code falsch ist, aber ich habe Warnung von

Jede Verwendung eines Schlüssel Objekt gewickelt werden sollte

class HelloWorldComponent extends React.Component { 

    constructor(){ 
    super() 
    this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange(e){ 
    console.log(e.target.value) 
    } 

    render() { 
    const data = { 
     "fruits":[ 
     {"name":"banana","value":true}, 
     {"name":"watermelon","value":false}, 
     {"name":"lemon","value":true}, 
     ] 
    } 
    return (  
     {data.fruits.map(obj => 
     <div> 
      <label>{obj.name}</label> 
      <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/> 
     </div> 
     )} 
    ); 
    } 
} 

http://jsbin.com/nuzeqinave/1/edit?html,js,console,output

Was ist hier falsch? ich habe alles in einem <div>

Answer 1

i die denken wickeln hat die le Rückkehr Ihrer Render-Methode muss gewickelt werden:

render() { 
const data = { 
    "fruits":[ 
    {"name":"banana","value":true}, 
    {"name":"watermelon","value":false}, 
    {"name":"lemon","value":true}, 
    ] 
} 
return (
    <div> 
    {data.fruits.map(obj => 
    <div> 
     <label>{obj.name}</label> 
     <input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/> 
    </div> 
    )} 
    </div> 
    ); 
    } 
} 

Answer 2

Der Code, den Sie nicht gepostet nicht das Problem Code, aber Ihr jsbin example tut. Der Fehler ist, weil Sie versuchen, hier ein Objektliteral zu machen:

<p>{this.state.fruits}</p> 

Wenn Sie nur die Ausgabe für Debugging-Zwecke das Objekt versucht werden, können Sie es als String JSON kodieren:

<p>{JSON.stringify(this.state.fruits)}</p> 

Welche , in Ihrem Beispiel setzen Sie nur state.fruits in ein leeres Objekt und Sie es nie aktualisieren, so dass Sie einfach die gerenderte Ausgabe:

{}