React.useState，不會更新。 如何執行 React useState 的即時更新？

Question

因此，我正在設置一個 react useContext 來共享用戶的數據，例如用戶名和登錄狀態等...每次用戶刷新應用程序時，我都會向服務器發出請求以驗證他們是否具有有效的令牌，然后用戶就可以登錄了。很好，但是我在 react 中遇到的一個問題是知道如何獲得 useState 的即時更新，因為一旦用戶得到驗證，就需要立即更新。

我讀過你必須創建一個新的 object 以便 React 知道它是一個新的 object 然后它會觸發重新渲染......幾乎所有我能想到的組合我都試過了。 有人可以為我澄清一下它是如何完成的嗎？

選項1：

   setUser(prev => {
    return { ...prev, ...newObj }
   })

選項 2：

   setUser({ ...newObj })

有人可以給我正確的方法來即時更新 React useState。

謝謝

import React, { useState } from "react";
import { useReadCookie } from "../hooks/cookies";
import UserContext from "./user-context";

const UserContextProvider = ({ children }) => {
  const readCookie = useReadCookie;

  const [user, setUser] = useState({
    name: null,
    userID: null,
    token: null,
    permissions: null,
    loginStatus: false,
    checkLoginStatusReady: false,
  });


  const loginStatus = async () => {
    return new Promise(async (resolve, rej) => {
      // So we'll reach out to the server and check to see if the
      // User is logged in

      const token = readCookie("token");

      if (token && token.length === 174) {
        // send a request to see if this is a valid user
        const req = await fetch("/api/checkLoginStatus.php");

        const res = await req.json();

        // console.log(res);
        handleLogUserIn(res);
      }

      console.log(user, "The state variable");
      resolve();
    });
  };

  const handleLogUserIn = (res) => {
    if (res.success === true) {
      const userObj = {
        name: res.name,
        userID: res.userID,
        token: res.token,
        permissions: res.permissions,
        loginStatus: true,
        checkLoginStatusReady: true,
      };

      console.log(userObj, "the user variable");

      setUser({ ...userObj });
    }
    else {
      console.log("Not going here");
      const userObj = {
        name: null,
        userID: null,
        token: null,
        permissions: null,
        loginStatus: false,
        checkLoginStatusReady: true,
      };
      setUser({ ...userObj });
    }
  };

  return (
    <UserContext.Provider
      value={{
        username: user.username,
        userID: user.userID,
        token: user.token,
        permissions: user.permissions,
        loginStatus: user.loginStatus,
        checkLoginStatusReady: loginStatus,
        setUser,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

export default UserContextProvider;

Answer 1

如果使用，您可以使用 useEffect 收聽 state 更新示例

const [state, setState] = useState({
 username : "",
 status : "",
})

useEffect(() => {
   setState({
...state, 
username : state.username,
status : "active,
})
},[state])

或者如果使用上下文：在父 provider.js 上：

import React, { useState } from 'react'

export const UserContext = React.createContext({
  username: "",
  status: "active",
  setUser: () => {}
})

export const UserContextProvider = (props) => {

  const setUser = (param) => {
    setState({...state, username: param.username, status: param.status})
  }

  const initState = {
   username: "",
   status: "active",
   setUser: () => {}
  } 

  const [state, setState] = useState(initState)

  return (
    <UserContext.Provider value={state}>
      {props.children}
    </UserContext.Provider>
  )
}

在組件上：

import React, { useContext } from 'react'
import provider from './provider'

function Component() {

  const context = useContext(provider.UserContext)
  const onClick = () => {
    // do hit api
    if(token){
      state.setUser({username : "a", status:"inactive"})
    }
  }

  return (
    <provider.UserContextProvider>
      <buttin onClick={onClick}></button>
        <div>username : {state.username}</div>
        <div>status : {state.status}</div>
    </provider.UserContextProvider>
  )
}