如何在React评分组件中实现每个浏览器仅允许评分一次的校验

实现逻辑 #

• 核心依赖浏览器本地存储localStorage持久化用户的提交记录，实现跨会话的状态留存
• 组件初始化时优先读取本地存储的评分状态，若已存在记录则直接禁用评分组件
• 用户提交评分时同步写入状态到本地存储，同时锁定组件不可再操作

注意：该方案仅为客户端基础限制，若要彻底防止重复提交，需在服务端结合用户IP、浏览器指纹、账号体系等做二次校验，用户清理浏览器本地缓存后客户端限制会失效。

修改后可直接使用的组件代码 #

export default function App() {
  // 初始化时从localStorage读取已提交的评分，默认0
  const [value, setValue] = React.useState(() => {
    const savedRate = localStorage.getItem('user_rating')
    return savedRate ? Number(savedRate) : 0
  });
  // 计算是否已经提交过评分
  const hasRated = value > 0

  const handleRate = (e) => {
    // 已经提交过直接拦截操作
    if (hasRated) return
    const newRate = Number(e.target.value)
    setValue(newRate)
    // 评分写入localStorage持久化存储
    localStorage.setItem('user_rating', newRate)
  }

  return (
    <div>
      <Box component="fieldset" mb={3} borderColor="transparent">
        <Typography component="legend">Rate</Typography>
        <Rating
          name="pristine"
          value={value}
          readOnly={hasRated} // 已提交则设为只读状态
          onClick={handleRate}
        />
        {/* 可选：增加提交后的提示文案 */}
        {hasRated && <Typography variant="body2" color="text.secondary">您已完成评分，感谢参与</Typography>}
      </Box>
    </div>
  );
}

如果需要实现关闭浏览器后即可重新评分的效果，把代码中所有localStorage替换为sessionStorage即可。

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