javascript - 在 React Context API 和 Redirect 中保存 API 响应

Question

在获取电子邮件和密码后的登录页面中，我通过Axios post请求发送它们以验证并生成一个JWT web token，并使用该令牌调用另一个Axios get请求以获取一些数据（包）。为此，我使用了链接，所有这些都发生在handleSubmit. 我也曾经context api保存所有 API 响应，然后在不同的页面上使用它。但是在提交表单数据后，我在控制台日志中得到了响应，但packs没有设置为我通过第二个Axios请求中的调度调用的有效负载。虽然loggedIn设置为true但packs正在返回undefined。它应该包含 3 个对象的数组。我也用过Redirectfromreact-router-dom和 if the loggedInistrue（提交表格后）它应该带我到主页或{/}. 它也不起作用。点击提交后的 API Response

登录.js

const [{ packs, loggedIn }, dispatch] = useAppContext();
  console.log(packs);
  console.log(loggedIn);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      email: email,
      password: password,
    };

    axios
      .post("https://playtoshi.totafantasy.com/api/auth/login", data)
      .then((res) => {
        localStorage.setItem("token", res.data.token);
        return axios.get("https://playtoshi.totafantasy.com/api/packs").then(
          (res) => console.log(res),
          dispatch({
            type: "GET_DATA",
            packs: res.data.packs,
            loggedIn: true,
          })
        );
      })
      .catch((err) => console.log(err));
    if (loggedIn) return <Redirect to={"/"} />;
  };

  return (
    <div className="login__container">
      <form className="login__form" onSubmit={handleSubmit}>
        <h3>Sign In</h3>

        <div className="form-group">
          <label>Email address</label>
          <input
            type="email"
            className="form-control"
            placeholder="Enter email"
            required
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div className="form-group">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Enter password"
            required
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <div className="form-group">
          <div className="custom-control custom-checkbox">
            <input
              type="checkbox"
              className="custom-control-input"
              id="customCheck1"
              style={{ marginRight: "5px" }}
            />
            <label className="custom-control-label" htmlFor="customCheck1">
              Remember me
            </label>
          </div>
        </div>

        <button type="submit" className="btn btn-primary btn-block">
          Submit
        </button>
        <p className="forgot-password text-right">
          Forgot <a href="/">password?</a>
        </p>
      </form>
    </div>
  );
}

export default Login;

减速器.js

export const initialState = {
  packs: [],
  loggedIn: false,
};

export const reducer = (state, action) => {
  switch (action.type) {
    case "GET_DATA":
      return {
        ...state,
        packs: action.packs,
        loggedIn: true,
      };

    default:
      return { ...state };
  }
};

上下文.js

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

export const AppContext = createContext();

export const Context = ({ initialState, reducer, children }) => {
  return (
    <AppContext.Provider value={useReducer(reducer, initialState)}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

标签： javascriptreactjsreact-context