Material UI只读Rating组件接收Props后未更新问题排查

你遇到的问题核心是误用了Rating组件的属性：

• Material UI的Rating组件中，defaultValue仅在首次渲染时设置初始值，后续props更新不会触发它重新赋值。
• 而你用details?.average_rating作为动态更新的值，应该使用value属性来绑定，这样当父组件的details数据加载完成后，Rating组件会自动同步最新值。

修改子组件中Rating的代码：

<Rating 
  name="half-rating-read" 
  value={details?.average_rating}  // 把defaultValue替换为value
  precision={0.5} 
  readOnly 
  size="small" 
  sx={{color:'white',borderColor:'white'}} 
  className={classes.rating}
/>

额外检查点：确保父组件的details状态在数据加载完成后是不可变更新（比如通过setDetails传入全新对象，而非直接修改原对象属性），这样React才能检测到props变化并触发子组件重新渲染。

内容的提问来源于stack exchange，提问作者Mehedi Hasan