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方法的整个返回：

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设置为空对象并且永远不会更新它，因此您只需获取渲染输出：

{}

警告：任何对键控对象的使用都应该被包裹

2 个答案: