从JS对象创建多个react复选框

Question

我有一个Object处于状态，它存储四个"风险类型"复选框的当前值

riskTypes: {"Fraud": true, "Steal": true, "Scam": true, "Theft": true},

在子组件上渲染它们我使用：

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

但这不起作用，没有任何渲染，但是如果我console.log而不是创建复选框，它会很好地打印它们。非常感谢任何帮助！

Answer 1

React期望JSX是某种形式的，无论是某种HTML还是HTML数组。forEach在对数组进行变异而不是返回一个新数组时，并没有实现这一点。

map通过Object.entries生成一些基于状态中信息的JSX，并且当您更新新状态时，请确保保留旧状态属性。

我还在输入元素上使用name属性。

const { Component } = React;
class Example extends Component {
constructor(props) {
super();
this.state = {
riskTypes: props.riskTypes,
tempProp: 'temp',
tempProp2: 'temp2'
};
}
handleRiskTypeChange = (e) => {
// Get the name of the input, and its checked value
const { name, checked }  = e.target;
// Because state is a nested object we
// 1) need to keep the state
// 2) update `riskTypes` using the existing
// riskTypes values, and updating only the one we
// need to update based on the name of the input
this.setState({
...this.state,
riskTypes: {
...this.state.riskTypes,
[name]: checked
}
}, () => console.log(JSON.stringify(this.state)));
}
getRiskTypes = () => {
const { riskTypes } = this.state;
const entries = Object.entries(riskTypes);
return entries.map(([key, value]) => {
return (
<li>
<label>
<input
name={key}
type="checkbox"
value={key}
checked={value}
onChange={this.handleRiskTypeChange}
/>{key}
</label>
</li>
);
});
}
render() {
return (
<ul>{this.getRiskTypes()}</ul>
);
}
};
const riskTypes = {'Fraud': true, 'Steal': true, 'Scam': true, 'Theft': true };
ReactDOM.render(
<Example riskTypes={riskTypes} />,
document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>