如何通过JS对象生成多个React复选框？渲染无内容问题求助

问题原因&解决方法 #

1. 遍历方法错误，无元素返回

你使用的forEach方法仅会遍历数组执行回调逻辑，不会返回任何值，JSX无法识别到需要渲染的元素，需要替换为map方法返回可渲染的元素数组，同时需要给循环生成的列表项添加唯一key属性避免React渲染告警。

2. 选中状态取值错误

你定义的riskTypes对象中每个属性的值直接是布尔值，不需要额外读取.value属性，原写法this.props.riskTypes[key].value会拿到undefined，导致复选框始终为未选中状态。

修复后代码示例 #

{
  Object.keys(this.props.riskTypes).map(key => (
    <li key={key}>
      <label>
        <input
          type="checkbox"
          value={key}  
          checked={this.props.riskTypes[key]}
          onChange={this.handleRiskTypeChange}
        /> {key}
      </label>
    </li>
  ))
}

补充说明 #

如果handleRiskTypeChange定义在子组件中，需要确保逻辑内调用父组件传入的更新方法修改riskTypes对应的state，不能直接修改props的值。

内容的提问来源于stack exchange，提问作者dooglex