使用react-rating库出现UNSAFE_componentWillReceiveProps警告如何解决

这个警告并非你编写的Product组件代码有问题，是你引入的第三方react-rating库的旧版本使用了React已废弃的UNSAFE_componentWillReceiveProps生命周期方法，在React严格模式下就会触发该警告。

可根据你的使用场景选择以下方案修复：

• 方案1：升级react-rating到最新稳定版
  新版react-rating已经适配了最新的React生命周期规范，升级后即可消除警告，执行以下命令升级即可：

  npm install react-rating@latest
  # 如果你用yarn
  yarn add react-rating@latest
  

• 方案2：临时移除React严格模式（不推荐长期使用）
  找到项目入口文件（一般是src/index.js），删掉外层的<React.StrictMode>标签，警告就会消失。但严格模式可以帮你提前发现React使用中的不规范问题，仅建议临时调试时用这个方法。
• 方案3：自行实现简易评分组件（如果你的使用场景是只读展示）
  你当前的代码里仅用了评分的展示功能，完全可以自己实现一个轻量组件，避免依赖第三方库，示例代码如下：

  // 可以单独封装成一个Stars组件
  const Stars = ({ rating, fullIcon, emptyIcon, max = 5 }) => {
    return Array.from({ length: max }, (_, i) => 
      i < Math.round(rating) ? fullIcon : emptyIcon
    )
  }
  
  // 原来使用Rating的地方替换成这个组件即可
  <Stars 
    className="icon-color"
    rating={star}
    emptyIcon={ratingStar2}
    fullIcon={ratingStar}
  />
  

• 方案4：替换为其他维护活跃的评分组件
  如果需要交互评分功能，可以选择其他适配了最新React规范的组件库，比如Ant Design的Rate组件、MUI的Rating组件等，都是经过社区验证的成熟方案。

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