React忘记密码场景：如何将URLSearchParams中的Token传给后端

你当前的核心问题是读取到URL中的Token后未持久存储，导致调用API时无法传递该参数，以下是具体修复方案：

1. 存储URL中的Token #

在组件中添加state保存Token，避免仅在useEffect中临时读取：

export function PasswordConfirm() {
  const [loading, setLoading] = useState(false)
  const [hasErrors, setHasErrors] = useState<boolean | undefined>(undefined)
  // 添加state存储Token
  const [token, setToken] = useState<string | null>(null)
  const {search} = useLocation()

  useEffect(() => {
    const query = new URLSearchParams(search)
    const urlToken = query.get('token')
    setToken(urlToken) // 将Token存入state
    console.log(urlToken) 
  }, [search]) // 依赖项添加search，确保URL变化时重新读取

  // ... 其余代码
}

2. 在API调用时传递Token #

修改formik的onSubmit方法，调用requestPasswordConfirm时传入存储的Token，同时注意函数参数顺序（你的API函数要求Token在前、密码在后）：

const formik = useFormik({
  initialValues,
  validationSchema: PasswordConfirmSchema,
  onSubmit: (values, {setStatus, setSubmitting}) => {
    // 先校验Token是否存在，避免无效请求
    if (!token) {
      setStatus('无效的密码重置链接')
      setSubmitting(false)
      return
    }
    setLoading(true)
    setHasErrors(undefined)
    setTimeout(() => {
      // 传递Token和用户输入的新密码（根据实际业务调整values中的字段）
      requestPasswordConfirm(token, values.password)
        .then(({data: {result}}) => {
          setHasErrors(false)
          setLoading(false)
        })
        .catch(() => {
          setHasErrors(true)
          setLoading(false)
          setSubmitting(false)
          setStatus('密码重置失败，请检查链接或密码格式')
        })
    }, 1000)
  },
})

3. 可选优化 #

• 若URL中无Token，可直接渲染错误提示：

if (!token) {
  return <div>无效的密码重置链接，请重新申请</div>
}

• 确认values.changepassword和values.password的业务含义，确保传递给API的是用户最终设置的新密码，与后端字段要求匹配。

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