如何解决在React中对状态对象进行迭代不会显示任何内容
我正在尝试动态显示复选框,该复选框将具有state中定义的起始值。我正在使用Material-UI来显示ui组件。 状态在组件安装中填充,看起来像这样:
tagState: {
All: true,Pizza: false,Breakfast: false,Chicken: false
}
我使用对象条目和forEach为处于这种状态的每个键创建一个复选框:
<FormControl component="fieldset" className={classes.formControl}>
<FormGroup>
{Object.entries(tagState).forEach((tag) =>
<FormControlLabel
control={<CheckBox checked={tag.value} onChange={handleChange} name={tag.key}/>}
label={tag.key}
/>
)}
</FormGroup>
</FormControl>
我没有任何错误,但也没有任何输出。我已经在forEach循环中使用console.log(tag)进行了检查,它按照需要显示了所有键值对。
谢谢
解决方法
您应该使用map,因为forEach会迭代,但什么也不返回。
<FormControl component="fieldset" className={classes.formControl}>
<FormGroup>
{Object.entries(tagState).map(([key,value]) =>
<FormControlLabel
control={<Checkbox checked={value} onChange={handleChange} name={key}/>}
label={key}
/>
)}
</FormGroup>
</FormControl>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。