MUI警告：组件初始化后修改非受控Rating默认值的问题排查

警告触发原因 #

你当前使用defaultValue给Rating组件设置初始值，这是非受控组件的用法——组件内部会维护自己的状态，初始值仅在第一次渲染时生效。当父组件的props.vote_average在组件初始化完成后发生变化时，defaultValue会被重新赋值，但非受控组件不允许在初始化后修改初始值，因此触发了这个警告。

解决方法 #

有两种可行的解决方式，根据你的需求选择：

方式一：转为受控组件 #

用value替代defaultValue，让组件的状态由外部props完全控制，这是MUI官方推荐的解决方式。如果需要支持用户修改评分，还需配合onChange回调更新外部状态：

const StarsRating = (props) => {
  const ratingValue = props.vote_average ? Math.round(props.vote_average / 2) : 0;
  return (
    <>
      <Stack spacing={1}>
        <Rating 
          name="half-rating"
          value={ratingValue}
          {/* 如果需要用户交互，添加onChange回调：
          onChange={(event, newValue) => {
            // 通知父组件更新vote_average
            props.onRatingChange(newValue);
          }}
          */}
          sx={{
            '& .MuiRating-iconFilled': { color: '#544C21' },
            '& .MuiRating-iconFocus': { color: 'orange' },
            '& .MuiRating-iconHover': { color: 'green' }
          }}
        />
      </Stack>
    </>
  );
};

方式二：保持非受控，确保初始值变化时重新渲染组件 #

如果只需要展示评分、不需要用户交互，可以给Rating组件添加key属性，当vote_average变化时，React会销毁旧组件并创建新组件，从而重新应用初始值：

const StarsRating = (props) => {
  const ratingValue = props.vote_average ? Math.round(props.vote_average / 2) : 0;
  return (
    <>
      <Stack spacing={1}>
        <Rating 
          name="half-rating"
          defaultValue={ratingValue}
          key={ratingValue}
          sx={{
            '& .MuiRating-iconFilled': { color: '#544C21' },
            '& .MuiRating-iconFocus': { color: 'orange' },
            '& .MuiRating-iconHover': { color: 'green' }
          }}
        />
      </Stack>
    </>
  );
};

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