未捕获（承诺）类型错误：无法在已撤销的代理上执行“设置”

Question

I am trying to build a login/signup system on my React website using JWT .

I have an API set up which works perfectly. I need to integrate the user login flow with the server.

This is my userSlice -

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    signup: (state, action) => {
      fetch("http://localhost:5000/user/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(action.payload),
      })
        .then((res) => {
          console.log(res.data);
          state.user = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    login: (state, action) => {
      fetch("http://localhost:5000/user/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(action.payload),
      }).then((res) => {
        state.user = res.data;
      });
    },
    logout: (state) => {},
  },
});

export const { login, logout, signup } = userSlice.actions;

export const selectCount = (state) => state.user.user;

export default userSlice.reducer;

Signup Component -

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { signup } from "../../features/userSlice";

import "./Signup.css";

function Signup() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const dispatch = useDispatch();

  const signUpHandler = (e) => {
    e.preventDefault();

    dispatch(signup(name, email, password));
  };

  return (
    <div className="signup">
      <h3>Sign Up</h3>
      <form method="POST">
        <div className="input_area">
          <label>Username</label>
          <input type="text" onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="input_area">
          <label>Email</label>
          <input type="text" onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="input_area">
          <label>Password</label>
          <input
            type="password"
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <button onClick={signUpHandler} type="submit">
          Sign Up
        </button>
      </form>
    </div>
  );
}

export default Signup;

When I click the Sign Up button, I get this error -

Uncaught (in promise) TypeError: Cannot perform 'set' on a proxy that has been revoked

Any idea what's causing the error? The backend works fine.

Thanks in advance.

EDIT:

There was a mistake on my part after fetch. Instead of state.user = res.data I had to do state.user = JSON.parse(res.data)

But after I do this, I get a different error which says -

Unhandled Rejection (SyntaxError): Unexpected token u in JSON at position 0

This is the response I get in POSTMAN

Answer 1

我认为您可能想改用https://redux-toolkit.js.org/api/createAsyncThunk因为您在这里调用 api。