Javascript useEffect缺少依赖项_Javascript_Reactjs_React Hooks

Javascript useEffect缺少依赖项

javascript reactjs

Javascript useEffect缺少依赖项,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,就我的一生而言，我似乎无法删除关于我的useEffect缺少依赖项fetchProfile（）的ESlinting警告。当我将fetchProfile添加到依赖项数组时，会得到一个无休止的循环。我非常感谢任何能帮助我压制这一警告的建议。代码如下： import React, { useEffect, useContext, useReducer } from 'react' import { BrowserRouter as Router, Switch, Route } from 'react

就我的一生而言，我似乎无法删除关于我的useEffect缺少依赖项fetchProfile（）的ESlinting警告。当我将fetchProfile添加到依赖项数组时，会得到一个无休止的循环。我非常感谢任何能帮助我压制这一警告的建议。代码如下：

import React, { useEffect, useContext, useReducer } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import './App.css'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles/'
import UserContext from './contexts/UserContext'
import jwtDecode from 'jwt-decode'
import axios from 'axios'

// utils
import reducer from './utils/reducer'
import themeFile from './utils/theme'
import AuthRoute from './utils/AuthRoute'
import UnAuthRoute from './utils/UnAuthRoute'

// Components
import NavBar from './components/NavBar'

// Pages
import Home from './pages/Home'
import Login from './pages/Login'
import Profile from './pages/Profile'
import SignUp from './pages/SignUp'
import Admin from './pages/Admin'
import Dashboard from './pages/Dashboard'
import Alumni from './pages/Alumni'

// context
import { ProfileContext } from './contexts/ProfileContext'

const theme = createMuiTheme(themeFile)

// axios.defaults.baseURL = `https://us-central1-jobtracker-4f14f.cloudfunctions.net/api`

const App = () => {
  const initialState = useContext(UserContext)
  const [user, setUser] = useContext(ProfileContext)
  const [state, dispatch] = useReducer(reducer, initialState)

  const fetchProfile = async token => {
    await axios
      .get(`/user`, {
        headers: {
          Authorization: `${token}`
        }
      })
      .then(res => {
        setUser(res.data)
      })
      .catch(err => console.log({ err }))
  }
  // keeps userContext authorized if signed in
  useEffect(
    _ => {
      const token = localStorage.FBIdToken
      if (token && token !== 'Bearer undefined') {
        const decodedToken = jwtDecode(token)
        if (decodedToken.exp * 1000 < Date.now()) {
          localStorage.removeItem('FBIdToken')
          dispatch({ type: 'LOGOUT' })
        } else {
          dispatch({ type: 'LOGIN' })
          state.isAuth && fetchProfile(token)
        }
      } else {
        dispatch({ type: 'LOGOUT' })
        localStorage.removeItem('FBIdToken')
      }
    },
    [state.isAuth]
  )

  return (
    <MuiThemeProvider theme={theme}>
      <UserContext.Provider value={{ state, dispatch }}>
        <div className="App">
          <Router>
            <NavBar isAuth={state.isAuth} />
            <div className="container">
              <Switch>
                <Route exact path="/" component={Home} />
                <UnAuthRoute
                  path="/signup"
                  component={SignUp}
                  isAuth={state.isAuth}
                />
                <UnAuthRoute
                  path="/login"
                  component={Login}
                  isAuth={state.isAuth}
                />
                <AuthRoute
                  path="/profile"
                  component={Profile}
                  isAuth={state.isAuth}
                />
                <AuthRoute
                  path="/dashboard"
                  component={Dashboard}
                  isAuth={state.isAuth}
                />
                <Route path="/admin" component={Admin} isAuth={state.isAuth} />
                <AuthRoute
                  path="/users/:id"
                  component={Alumni}
                  isAuth={state.isAuth}
                />
              </Switch>
            </div>
          </Router>
        </div>
      </UserContext.Provider>
    </MuiThemeProvider>
  )
}

export default App

import React，{useffect，useContext，useReducer}来自“React”
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}
导入“./App.css”
从“@material ui/core/styles/”导入{MuiThemeProvider，createMuiTheme}”
从“./contexts/UserContext”导入UserContext
从“jwt decode”导入jwtDecode
从“axios”导入axios
//乌提尔斯
从“/utils/reducer”导入减速机
从“/utils/theme”导入主题文件
从“/utils/AuthRoute”导入AuthRoute
从“/utils/unauthorute”导入unauthorute
//组成部分
从“./components/NavBar”导入导航栏
//页数
从“./pages/Home”导入主页
从“./pages/Login”导入登录名
从“./pages/Profile”导入配置文件
从“./pages/SignUp”导入注册
从“./pages/Admin”导入管理员
从“./pages/Dashboard”导入仪表板
从“./页面/校友”导入校友
//上下文
从“./contexts/ProfileContext”导入{ProfileContext}
常量主题=CreateMuiteme（主题文件）
//axios.defaults.baseURL=`https://us-central1-jobtracker-4f14f.cloudfunctions.net/api`
常量应用=（）=>{
const initialState=useContext（UserContext）
const[user，setUser]=useContext（ProfileContext）
const[state，dispatch]=useReducer（reducer，initialState）
const fetchProfile=异步令牌=>{
等待axios
.get（`/user`{
标题：{
授权：`${token}`
}
})
。然后（res=>{
setUser（res.data）
})
.catch（err=>console.log（{err}））
}
//在登录时保持userContext的授权
使用效果(
_ => {
const token=localStorage.FBIdToken
if（令牌和令牌！==‘承载未定义’）{
const decodedToken=jwtDecode（令牌）
如果（decodedToken.exp*1000

您可以执行以下两种操作之一：

将

fetchProfile

完全移出组件，并使用其结果，而不是让它直接调用

setUser

记忆

fetchProfile

，这样只有当某项内容依赖于更改时，才能创建一个新的文件（这是…永远不会，因为

fetchProfile

只依赖于

setUser

，这是稳定的）。（您可能会使用或其近亲执行此操作，尽管理论上，

usemo

[因此

useCallback

]是为了性能增强，而不是“语义保证”。）

对我来说，1是你最好的选择。在组件之外：

const fetchProfile = token => {
  return axios
    .get(`/user`, {
      headers: {
        Authorization: `${token}`
      }
    })
}

然后

useffect(
_ => {
const token=localStorage.FBIdToken
if（令牌和令牌！==‘承载未定义’）{
const decodedToken=jwtDecode（令牌）
如果（decodedToken.exp*1000setUser（res.data））//***
.catch（error=>console.error（error））//***
}                                           // ***
}
}否则{
分派（{type:'LOGOUT'}）
localStorage.removeItem（'FBIdToken'）
}
},
[state.isAuth]
)

由于该操作是异步的，如果组件同时重新呈现，您可能希望取消/忽略它（这取决于您的用例）。