遍历一个对象，并为对象中的每个属性返回一个组件

Question

大家好，我刚开始反应，我构建了组件-我有一个用户偏好的状态-我会查看所有偏好，并返回他对每个偏好的评分-在mui的帮助下-我已经尝试了几个小时，但我做不到。

这是我写的代码，它运行了，但我没有取回组件，我不明白为什么。

import React, { Component, Fragment } from 'react';
// MUI stuff
import Rating from '@material-ui/lab/Rating';
// Icons
import ListIcon from '@material-ui/icons/List';

class Profile extends Component {
constructor(props) {
super(props);
this.state = 
{preferences: {
html: "5",
react: "4",
css: "4",
angular: "3",
}};
}
render() {
let profilePreferences = {preferences && (
<Fragment>
<ListIcon color="primary" />
<hr />
{
Object.keys(preferences).map(prefer => {<Rating name={prefer} defaultValue={parseInt(preferences[prefer], base)} precision={1} readOnly/>}) 
}

<hr />
</Fragment>
)}
return profilePreferences ;
}
}
export default Profile;

我认为问题很小，但我找不到，我只想检查我的对象，对于每个特征，返回一个"；评级"；"；materialUi"；。

Answer 1

代码的第一个问题是没有使用this.state.preferences。第二个问题是您对JS中{}和()括号的用法感到困惑。第三点-当您输出元素列表时，不要忘记打印密钥。

我已经编辑了你的代码。下面是一个关于codepen的工作示例。

Answer 2

当前，preferences未定义。你需要从this.state那里得到它。

render() {
const { preferences } = this.state; // <------ Add this line
let profilePreferences = {preferences && (
<Fragment>
<ListIcon color="primary" />
<hr />
{
Object.keys(preferences).map(prefer => (<Rating name={prefer} defaultValue={parseInt(preferences[prefer], base)} precision={1} readOnly/>)) 
}

<hr />
</Fragment>
)}
return profilePreferences ;
}