React项目中如何让getDataByToken仅在指定页面触发一次

要实现getDataByToken仅在UserInfo页面加载时触发一次，核心是利用React的useEffect钩子——它专门用来处理组件的副作用操作（比如数据获取、订阅等），并且可以通过依赖项精准控制执行时机。

修改后的代码示例 #

import React, { useState, useEffect } from 'react' // 新增useEffect导入
import { getDataByToken, sendData } from '../fetch'
import Navbar from '../Components/UI/Navbar/Navbar'
import classes from './UserInfo.module.css'
import NewInput from '../Components/UI/NewInput/NewInput'

const UserInfo = () => {
  // 将请求逻辑移入useEffect内部
  useEffect(() => {
    // 内部定义异步函数处理请求
    const fetchUserInfo = async () => {
      const result = await getDataByToken("http://127.0.0.1:5000/@me")
      if (result.status === 200) {
        localStorage.setItem('nick', result.data[1])
        localStorage.setItem('email', result.data[3])
      }
    }

    fetchUserInfo()
  }, []) // 空依赖数组：仅在组件首次挂载（页面加载完成）时执行一次

  // 组件原有逻辑...
  return (
    // 组件JSX内容
  )
}

export default UserInfo

关键说明 #

• 为什么这能解决问题？：

  • 放在组件外部的代码会在模块被导入时就执行，哪怕其他页面只是引入了UserInfo组件（未渲染），请求也会被触发。
  • 直接写在组件函数内部的代码，会在每次组件重渲染时重复执行（比如输入框打字触发状态更新，导致组件重新渲染）。
  • 带空依赖数组[]的useEffect，只会在组件**首次挂载（页面加载完成）**时执行一次，完全匹配你的需求。

• 异步逻辑的另一种写法：
  useEffect的回调不能直接标记为async，你也可以用.then链替代async/await，效果完全一致：

  useEffect(() => {
    getDataByToken("http://127.0.0.1:5000/@me").then(result => {
      if (result.status === 200) {
        localStorage.setItem('nick', result.data[1])
        localStorage.setItem('email', result.data[3])
      }
    })
  }, [])
  

额外优化建议 #

如果UserInfo组件需要直接渲染用户信息，建议把数据存在组件的state里，而非仅存入localStorage，这样数据变化时组件能自动更新：

const UserInfo = () => {
  const [userInfo, setUserInfo] = useState({ nick: '', email: '' })

  useEffect(() => {
    getDataByToken("http://127.0.0.1:5000/@me").then(result => {
      if (result.status === 200) {
        const nick = result.data[1]
        const email = result.data[3]
        setUserInfo({ nick, email })
        localStorage.setItem('nick', nick)
        localStorage.setItem('email', email)
      }
    })
  }, [])

  // 渲染时直接使用userInfo.nick、userInfo.email
}

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