React遍历偏好对象渲染Material UI Rating组件失败求助

云上老周

2026-5-11

解决你的Profile组件Rating渲染问题

嘿，我看到你卡在这个小问题上啦，其实就是几个容易忽略的细节，咱们来一一修正：

问题点梳理

未正确访问state中的preferences：类组件里的state属性必须通过this.state来访问，你直接写preferences会导致变量未定义。
map函数缺少返回值：你的箭头函数用了大括号{}但没有显式return组件，这样遍历后不会生成任何DOM元素。
parseInt的基数参数未定义：base是未声明的变量，应该传入10表示十进制解析。
错误地将JSX包裹在对象中：profilePreferences被赋值为一个对象，但render需要返回JSX元素，要去掉外层的{}。

修正后的完整代码

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() { 
    const { preferences } = this.state; // 解构state里的preferences，方便后续使用
    let profilePreferences = preferences && ( 
      <Fragment> 
        <ListIcon color="primary" /> 
        <hr /> 
        { Object.keys(preferences).map(prefer => (
          // 用小括号让箭头函数自动返回组件，也可以写成{ return <Rating ... /> }
          <Rating 
            key={prefer} // 遍历列表要加唯一key，避免React警告
            name={prefer} 
            defaultValue={parseInt(preferences[prefer], 10)} 
            precision={1} 
            readOnly
          />
        )) } 
        <hr /> 
      </Fragment> 
    ); 
    return profilePreferences ; 
  } 
} 
export default Profile;