调度后不渲染视图

Question

当我运行 Logout 函数并转到 /logout 时，我想将我的用户设置为 null 并呈现一个注销页面，但是这段代码只是设置为 null 并且不呈现我写的任何内容作为回报有什么问题？

import React, { useEffect } from "react";
import { useStateValue } from "../StateProvider";

    const Logout = () => {
      const [{}, dispatch] = useStateValue();
    
      dispatch({
        type: "SET_USER",
        user: null,
      });
    
      return (
        <div>
          <h1
            style={{
              "background-color": "#F3B858",
              height: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              height: "90vh",
              color: "#fff",
              "font-size": "80px",
              "font-weight": 900,
            }}
          >
            BYE
          </h1>
        </div>
      );
    };
    
    export default Logout;

状态提供者：

import React, { createContext, useContext, useReducer } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

Answer 1

你可以试试

useEffect(() => {
dispatch({
        type: "SET_USER",
        user: null,
      });
},[user])