React JS中如何实现页面/组件仅对用户展示一次

生产环境必须以后端存储的用户提交状态作为唯一判断依据，前端本地存储仅可做体验优化或无登录态的临时场景兜底，纯前端方案无法防止用户清缓存绕过限制。

1. 生产环境标准实现（必做） #

这个方案适用于所有需要登录后填写、要求严格控制单次提交的业务场景：

• 后端用户表新增和该问卷绑定的状态字段，例如survey_submitted: boolean，默认值为false
• 用户访问问卷页时，第一时间请求接口拉取当前登录用户的问卷提交状态：
  • 接口返回已提交：直接渲染「您已完成本次问卷，感谢参与」的提示内容，或重定向到专属的已提交提示页，不要加载问卷表单组件
  • 接口返回未提交：正常渲染问卷组件供用户填写
• 用户提交表单时，后端接口除了存储问卷答案，同步将对应用户的survey_submitted字段更新为true；接口层必须加校验，如果收到已提交用户的提交请求，直接返回错误，避免用户绕过前端直接调接口重复提交
• 前端提交成功后，可以直接本地标记已提交状态，不需要等下次进页面再拉接口，提升体验

参考实现代码（基于React Router v6）：

import { useEffect, useState } from 'react'
import { Navigate } from 'react-router-dom'
import SurveyForm from './SurveyForm'

export default function SurveyPage() {
  // 状态分为加载中、未提交、已提交三种
  const [pageStatus, setPageStatus] = useState('loading')

  useEffect(() => {
    const getSubmitStatus = async () => {
      // 注意要带上用户登录态凭证
      const resp = await fetch('/api/survey/submit-status', { credentials: 'include' })
      const { hasSubmitted } = await resp.json()
      setPageStatus(hasSubmitted ? 'submitted' : 'unsubmitted')
    }
    getSubmitStatus()
  }, [])

  if (pageStatus === 'loading') return <div>页面加载中...</div>
  if (pageStatus === 'submitted') {
    // replace参数避免用户点返回又回到这个页面
    return <Navigate to="/survey/done" replace />
  }

  const handleSubmitSuccess = () => {
    setPageStatus('submitted')
    // 顺便写本地标记，做降级兼容
    localStorage.setItem('survey_submit_flag', '1')
  }

  return <SurveyForm onSubmitSuccess={handleSubmitSuccess} />
}

2. 临时场景兜底方案（无登录态、低要求活动可用） #

如果你的问卷不需要登录，只是临时活动、按设备做粗略的单次提交限制，可以用本地存储实现，注意这个方案防君子不防小人，用户清浏览器缓存、换设备就能重新填写：

• 页面初始化时先读取localStorage/sessionStorage中的提交标记
• 如果标记存在，直接展示已提交提示，不加载表单
• 用户提交成功后，往本地存储写入固定标记

参考代码：

export default function TemporarySurveyPage() {
  const localSubmittedFlag = localStorage.getItem('temp_survey_submitted')
  if (localSubmittedFlag) {
    return <div>您已完成本次问卷，感谢支持~</div>
  }

  const handleSubmitSuccess = () => {
    localStorage.setItem('temp_survey_submitted', '1')
    // 后续跳转到成功页或者展示提示即可
  }

  return <SurveyForm onSubmitSuccess={handleSubmitSuccess} />
}

注意避坑 #

• 不要把提交状态只存在React组件的state里，页面刷新后状态会丢失，必须做持久化
• 状态判断要尽可能提前，最好在路由层面就做拦截，避免表单组件先加载出来闪一下再被替换成提示
• 绝对不要信任前端传的「是否已提交」参数，所有权限判断必须在后端接口层做校验
• 如果是未登录场景要提升防刷能力，可以搭配IP限流、设备指纹做辅助判断，但准确度还是不如登录态绑定用户

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