javascript - React useReducer 不更新状态

标签 javascript reactjs react-hooks use-reducer

当用户登录但失败时,我使用 useReducer 更新 errorsState。我读过很多解决方案,据说 dispatch 是异步的,我知道这一点,所以我将 console.log 放在 useEffect 中查看errorsState 发生了变化,但不幸的是它没有改变。这是我的代码

登录.jsx

export default function Login({ userProps }) {
  //
  // some variables and state
  //
  const { loading, user } = useLogin({ email: state.email }, state.submitted)
  const [errors, dispatch] = useReducer(errorsReducer, errorsState)

  useEffect(() => {
    console.log("errors", errors) // it won't triggered because errors state didn't updating from UseLogin
  }, [errors])

  return content
}

这是获取函数useLogin

AuthAction.js

export const useLogin = (data, submitted) => {
  const [state, dispatch] = useReducer(userReducer, userState)
  const [errors, errorsDispatch] = useReducer(errorsReducer, errorsState)

  useEffect(() => {
    if (!submitted) return

    dispatch({
      type: USER_ACTIONS.MAKE_REQUEST,
    })

    ticketApi.login(data).then(({ res, status }) => {
      if (status !== "failed") {
        // Save to local storage
        const { token } = res
        // set token to local storage
        localStorage.setItem("jwtToken", token)
        // Set token to Auth Header
        setAuthToken(token)
        // decode token to get user data with jwt-decode
        const decoded = jwt_decode(token)
        // set current user
        return dispatch({
          type: USER_ACTIONS.GET_USER,
          payload: decoded,
        })
      }

      dispatch({
        type: USER_ACTIONS.END_REQUEST,
      })

      return errorsDispatch({
        type: ERRORS_ACTIONS.GET_ERRORS,
        payload: res.response.data,
      })
    })
  }, [submitted])

  return state
}

我尝试将 console.log 放入 ERRORS_ACTIONS.GET_ERRORS 中以查看响应,效果很好。 那么我哪里出错了?

最佳答案

useReducer 允许您更好地管理复杂的状态,它不是一个状态容器,您所做的是创建 2 个不同的状态,一个在 useLogin 内,另一个在 useLogin 内在 Login 组件中的其他部分,从 useLogin Hook 返回 errors,以便 Login 组件可以看到它。

登录

export default function Login({ userProps }) {
  //
  // some variables and state
  //
  const { loading, user, errors } = useLogin({ email: state.email }, state.submitted)

  useEffect(() => {
    console.log("errors", errors)
  }, [errors])

  return content
}

使用登录

export const useLogin = (data, submitted) => {
  const [state, dispatch] = useReducer(userReducer, userState)
  const [errors, errorsDispatch] = useReducer(errorsReducer, errorsState)

  useEffect(() => {
    if (!submitted) return

    dispatch({
      type: USER_ACTIONS.MAKE_REQUEST,
    })

    ticketApi.login(data).then(({ res, status }) => {
      if (status !== "failed") {
        // Save to local storage
        const { token } = res
        // set token to local storage
        localStorage.setItem("jwtToken", token)
        // Set token to Auth Header
        setAuthToken(token)
        // decode token to get user data with jwt-decode
        const decoded = jwt_decode(token)
        // set current user
        return dispatch({
          type: USER_ACTIONS.GET_USER,
          payload: decoded,
        })
      }

      dispatch({
        type: USER_ACTIONS.END_REQUEST,
      })

      return errorsDispatch({
        type: ERRORS_ACTIONS.GET_ERRORS,
        payload: res.response.data,
      })
    })
  }, [submitted])

  return { ...state, errors };
}

关于javascript - React useReducer 不更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64164844/

相关文章:

javascript - react 错误 : react/jsx-no-undef by react-bootstrap

reactjs - react Js : Store React Component in a variable and use it later

javascript - React Hook "useContext"在函数 "age"中调用,该函数既不是 React 函数组件,也不是自定义 React Hook 函数

javascript - 仅单击一个按钮即可隐藏/显示元素

javascript - 为 loginid 使用持久性 cookie 的风险

javascript - Angular 2 - 查看单个数据记录

javascript - 将 javascript 标签加载到 React 组件中

javascript - 将Firefox回放栏更改为音频的onclick按钮

javascript - 为什么注册按钮没有注册用户名和密码?

javascript - 在 setInterval 中使用 React 状态 Hook 时状态不更新