警告：任何使用一個密鑰對象應包

Question

我看不出有什麼不對我的代碼，但我得到了警告的

任何使用一個密鑰對象應包

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

這裏有什麼問題？我沒有在<div>

Answer 1

我覺得一切都包裹誰你的渲染方法的樂回報必須包裝：

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

您發佈的代碼不包括問題的代碼，但是你jsbin example一樣。這個錯誤是因爲你試圖渲染的對象常量這裏：

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

如果你只是想輸出對象調試的目的，你可以對其進行編碼，作爲一個JSON字符串：

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

哪在您的例子您剛剛設置state.fruits到一個空的對象，你永遠不更新，所以你只是得到渲染輸出：

{}