the error I'm getting is,
Cannot delete property '1' of [object Array]
TypeError: Cannot delete property '1' of [object Array]
at ObserverProxy.unsubscribeOne (http://localhost:3000/static/js/bundle.js:40212:27)
at http://localhost:3000/static/js/bundle.js:4866:9
at http://localhost:3000/static/js/bundle.js:636:7
at safelyCallDestroy (http://localhost:3000/static/js/bundle.js:71542:9)
at commitHookEffectListUnmount (http://localhost:3000/static/js/bundle.js:71680:15)
at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:3000/static/js/bundle.js:73361:15)
at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (http://localhost:3000/static/js/bundle.js:73317:9)
at commitPassiveUnmountEffects_begin (http://localhost:3000/static/js/bundle.js:73239:15)
at commitPassiveUnmountEffects (http://localhost:3000/static/js/bundle.js:73227:7)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:75050:7)

我得到的错误是，无法删除[对象数组]类型的属性“%1”错误：无法在ObserverProxy处删除[对象数组]的属性“%1”。取消订阅(http://localhost:3000/static/js/bundle.js:40212:27)在http://localhost:3000/static/js/bundle.js:4866:9处的http://localhost:3000/static/js/bundle.js:636:7安全调用提交时的Destroy(http://localhost:3000/static/js/bundle.js:71542:9)挂接有效列表Unmount(http://localhost：3,000/(http://localhost:3000/static/js/bundle.js:73361:15)/js/bundle.js：71680：15)提交时被动卸载内部删除树上光纤commitPassiveUnmountEffectsInsideOfDeletedTree_begin(http://localhost:3000/static/js/bundle.js:73317:9)提交时被动卸载效果_提交时开始(http://localhost:3000/static/js/bundle.js:73239:15)被动卸载刷新时影响(http://localhost:3000/static/js/bundle.js:73227:7)被动有效(http://localhost：3000/静态/js/bundle.js：75050：7)

and

和

TypeError {
stack:
'TypeError: Cannot assign to read only property '_canInitEmulator' of object '#'\n' +
' at _performFetchWithErrorHandling (http://localhost:3000/static/js/bundle.js:2967:25)\n' +
' at _performApiRequest (http://localhost:3000/static/js/bundle.js:2939:10)\n' +
' at getAccountInfo (http://localhost:3000/static/js/bundle.js:3105:10)\n' +
' at _reloadWithoutSaving (http://localhost:3000/static/js/bundle.js:3412:53)\n' +
' at async UserImpl._fromIdTokenResponse (http://localhost:3000/static/js/bundle.js:3862:5)\n' +
' at async UserCredentialImpl._fromIdTokenResponse (http://localhost:3000/static/js/bundle.js:7084:18)\n' +
' at async _signInWithCredential (http://localhost:3000/static/js/bundle.js:7346:26)',
message:
'Cannot assign to read only property '_canInitEmulator' of object '#''
}

TypeError{堆栈：‘TypeError：无法赋值给对象’#‘的只读属性’_canInitEmulator‘\n’+‘at_PerformFetchWithError Handling(http://localhost:3000/static/js/bundle.js:2967:25)\n’+‘at_PerformApiRequesthttp+’at GetAccount Info(http://localhost:3000/static/js/bundle.js:2939:10)\n‘+’at_reloadWithoutSving((http://localhost:3000/static/js/bundle.js:3105:10)\n‘：//localhost:3000/static/js/bundle.js:3412:53)\n‘+’at Async UserImp._FromIdToken Response(http://localhost:3000/static/js/bundle.js:3862:5)\n‘+’at Async UserCredentialImp._FromIdToken Response(http://localhost:3000/static/js/bundle.js:7084:18)\n‘+’at Async_SignInWith Credential(http://localhost:3000/static/js/bundle.js:7346:26)‘，消息：‘无法分配给对象’#‘’的只读属性‘_canInitEmulator’}

and code is,

密码是，

App.jsx

import "./App.css";
import { Route, Routes } from "react-router-dom";
import Wrapper from "./components/layouts/Wrapper";
import Home from "./pages/Home";
import AddArticle from "./pages/AddArticle";
import ShowArticles from "./pages/ShowArticles";
import ArticleLayout from "./components/ArticleLayout";
import SignUpIn from "./pages/SignUpIn";
import RouteProtector from "./components/RouteProtector";

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Routes>
          <Route path="/" element={<ArticleLayout />}>
            <Route index element={<Home />} />
            <Route path=":articlename" element={<ShowArticles />} />
          </Route>
          <Route
            exact
            path="add-article"
            element={
              <RouteProtector>
                <AddArticle />
              </RouteProtector>
            }
          />
          <Route exact path="sign-up-in" element={<SignUpIn />} />
        </Routes>
      </Wrapper>
    </div>
  );
}

export default App;

SignUp.jsx

import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import { auth } from "../services/firebase";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";
import "./SignUp.css";
import userState from "../states/user";
import { useRecoilState } from "recoil";
import { useNavigate } from "react-router-dom";
const SignUp = ({ signIn }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useRecoilState(userState);
  const [signInState, setSignInState] = useState(signIn);
  const navigate = useNavigate();
  const signUpOrIN = () => {
    try {
      if (signInState) {
        signInWithEmailAndPassword(auth, email, password)
          .then((user) => setUser(user))
          .catch((e) => console.log(e));
        navigate("/add-article");
      } else {
        createUserWithEmailAndPassword(auth, email, password)
          .then((r) => setSignInState(true))
          .catch((e) => console.log(e));
      }
      setEmail("");
      setPassword("");
    } catch (e) {
      console.log("error is", e);
    }
  };
  console.log(JSON.stringify(user));
  if (!Object.keys(user).length) {
    return (
      <div className="SignUp">
        <div className="sign-up-form">
          <h3>Please Sign{signInState ? "In" : "Up"} </h3>
          <input
            type="email"
            placeholder="enter your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="email"
          />
          <br />
          <input
            type="password"
            placeholder="enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="password"
          />

          <button className="sign-up" onClick={() => signUpOrIN()}>
            {signInState ? "SignIn" : "SignUp"}
          </button>
        </div>
      </div>
    );
  } else return <Navigate to="/" replace />;
};

export default SignUp;

RouteProtector.jsx

import React, { useEffect } from "react";
import userState from "../states/user";
import SignUpIn from "../pages/SignUpIn";
import { onAuthStateChanged } from "firebase/auth";
import { useRecoilState } from "recoil";
import { auth } from "../services/firebase";
const RouteProtector = ({ children }) => {
  const [userDetails, setUserDetails] = useRecoilState(userState);

  useEffect(() => {
    const listen = onAuthStateChanged(auth, (data) => {
      if (data) {
        setUserDetails(data);
      } else {
        setUserDetails({});
      }
    });
    return () => {
      listen();
    };
  }, []);
  return (
    <div>
      {Object.keys(userDetails).length ? children : <SignUpIn signIn={true} />}
    </div>
  );
};

export default RouteProtector;

My recoil user state is,

我的后座力用户状态是，

user.js

import { atom } from "recoil";
const userState = atom({
  key: "userState",
  default: {},
});
export default userState;

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { RecoilRoot } from "recoil";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);
reportWebVitals();