修改 localStorage 会出现跨源错误

Question

我正在使用 reactjs 制作一个 web 应用程序，当开发突然出现这个错误：“抛出了一个跨源错误。React 没有访问开发中的实际错误对象”。我 AuthContext 将用户数据提供给 localStorage :

 const AuthProvider = ({ children }) => {
    
      const token = localStorage.getItem("token");
      const userInfo = localStorage.getItem("userInfo");
      const expiresAt = localStorage.getItem("expiresAt");
    
      const [authState, setAuthState] = useState({
        token,
        expiresAt,
        userInfo: userInfo ? JSON.parse(userInfo) : {},
      });
    
      const setAuthInfo = ({ token, userInfo, expiresAt }) => {
        localStorage.setItem("token", token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        localStorage.setItem("expiresAt", expiresAt);
    
        setAuthState({
          token,
          userInfo,
          expiresAt,
        });
      };

很遗憾，我在更新用户详细信息时遇到了问题。在上下文中我做了另一个功能：

编辑：我忘了写在函数执行后userDetails变为undefined所以我得到一个跨源错误

const setUserInfo = ({  userInfo }) => {
        localStorage.removeItem("userInfo");
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        

        setAuthState({
          userInfo,
        });
      };

我有 rest-api 更新详细信息的路线，示例性响应：

{
    "success": true,
    "user": {
        "role": role,
        "_id": id,
        "username": name,
        "email": email,
        "createdAd": createdAt,
        "__v": 0
    }
}

和用户rest-api用户登录时的响应，例如：

{
    "success": true,
    "token": token,
    "expiresAt": expiresAt,
    "userInfo": {
        "role": role,
        "_id": id,
        "username": name,
        "email": email,
        "_id": id
    }
}

更新详细信息在我调用它时有效，但在我遇到跨站点错误之后。

这里是提交功能

const handleUpdate = async (info) => {
    setError("");
    setLoading(true);

    try {
      const { data } = await fetchContext.authAxios.put(
        "http://localhost:5000/api/v1/auth/update-details",
        info
      );
      const user = data.user;
      console.log(user);
      auth.setUserState(data);
      setError(null);

      setLoading(false);
    } catch (err) {
      setLoading(false);
      // const { data } = err.response;
      // setError(data.error);
      console.log(err);
    }
  };

Answer 1

好吧我笨

const setUserInfo = ({  userInfo }) => {};

应该是

const setUserInfo = ( userInfo ) => {};

修改 localStorage 会出现跨源错误

Modifying localStorage gives A cross-origin error

javascript

reactjs

react-context

react-hooks