当我转到Auth页面时，由于错误，它显示空白页面

Question

在我的网站上，当我尝试转到Authpage时，它在我的注册.js 中显示错误UncaughtTypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

import React, { useState } from "react";
import { Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { useContext } from "react";
import { UserContext } from "./Context";
import { initializeApp } from "@firebase/app";
import {
getAuth,
RecaptchaVerifier,
signInWithPhoneNumber,
} from "firebase/auth";
import { signup } from "../../Actions/Auth";
import "./Auth.css";
function SignUpCard({ toggleCardFunc }) {
var firebaseConfig = {
apiKey: "*****",
authDomain: "*****",
projectId: "*****",
storageBucket: "******",
messagingSenderId: "******",
appId: "********",
measurementId: "*******",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const [isLogin, setIsLogin] = useContext(UserContext);  #here get error in this line on isLogin
const [checked, setchecked] = useState(false);
const [OTP, setOTP] = useState("");
const [displayOtp, setDisplayOTP] = useState(false);
const [user, setUser] = useState({
name: "",
email: "",
password: "",
});
const navigate = useNavigate();
const dispatch = useDispatch();
const handleCred = (e) => {
let name = e.target.name;
let value = e.target.value;
setUser({ ...user, [name]: value });
};
const configureRecaptcha = () => {
window.recaptchaVerifier = new RecaptchaVerifier(
"sign-in-button",
{
size: "invisible",
callback: (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
handleLogin();
console.log("Captcha Verified ");
},
defaultCountry: "IN",
},
auth
);
};
const handleLogin = () => {
const phoneNumber = "+91" + user?.phoneNo;
console.log(phoneNumber);
configureRecaptcha();
const appVerifier = window.recaptchaVerifier;
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
console.log("OTP has been sent");
setDisplayOTP(true);
})
.catch((error) => {
console.log(error);
});
};
const validateOTP = () => {
if (OTP.length !== 6) return;
window.confirmationResult.confirm(OTP).then((result) => {
// User signed in successfully.
const userResult = result.user;
// console.log(JSON.stringify(userResult))
alert("User is verified");
dispatch(signup(user));
setIsLogin(true);
navigate("/");
});
};
return (
<div className="auth">
{!displayOtp ? (
<div className="authWrap">
<div>
<p>Display Name</p>
<input type="text" onChange={handleCred} name="name" />
</div>
<div>
<p>Email</p>
<input type="email" onChange={handleCred} name="email" />
</div>
<div>
<p>Phone No</p>
<input type="text" onChange={handleCred} name="phoneNo" />
</div>
<div>
<p>Password</p>
<input type="password" onChange={handleCred} name="password" />
</div>
<div className="tc">
<input
type="checkbox"
name="tc"
onChange={() => setchecked(!checked)}
checked={checked}
/>
<p>
Opt-in to receive occasional product updates, user research
invitations, company announcements, and digest.
</p>
</div>
<div id="sign-in-button"></div>
<div className="login-button">
{user.name !== "" &&
user.email !== "" &&
user.password !== "" &&
checked ? (
<Button
onClick={handleLogin}
style={{
marginTop: "1.5rem",
height: "2.3rem",
background: "#0a95ff",
boxShadow: "inset 0 1px 0 0 hsl(0deg 0% 100% / 40%)",
color: "white",
fontSize: "0.813rem",
textTransform: "capitalize",
}}
>
Sign Up
</Button>
) : (
<Button
disabled
style={{
marginTop: "1.5rem",
height: "2.3rem",
background: "#868686",
boxShadow: "inset 0 1px 0 0 hsl(0deg 0% 100% / 40%)",
color: "white",
fontSize: "0.813rem",
textTransform: "capitalize",
}}
>
Sign Up
</Button>
)}
</div>
</div>
) : (
<div>
<p>Enter OTP send to {user?.phoneNo}</p>
<input
type="password"
onChange={(e) => setOTP(e.target.value)}
name="name"
/>
<div className="login-button">
<Button
onClick={validateOTP}
style={{
marginTop: "1.5rem",
height: "2.3rem",
background: "#0a95ff",
boxShadow: "inset 0 1px 0 0 hsl(0deg 0% 100% / 40%)",
color: "white",
fontSize: "0.813rem",
textTransform: "capitalize",
}}
>
Submit OTP
</Button>
</div>
</div>
)}
<div className="login-signup">
<p>
Already have an account?{" "}
<span style={{ cursor: "pointer" }} onClick={toggleCardFunc}>
Log in
</span>
</p>
<p>
{" "}
Are you an employer? <span> Sign up on Talent </span>
</p>
</div>
</div>
);
}
export default SignUpCard;

这里是我正在导入的context.js

import { useState, createContext } from "react";
export const UserContext = createContext();
export const UserProvider = ({ children }) => {
const [isLogin, setIsLogin] = useState(false);
return (
<UserContext.Provider value={[isLogin, setIsLogin]}>
{children}
</UserContext.Provider>
);
};

我已经试着把vscode的建议放在给出错误的线上

// eslint-disable-next-line no-unused-vars
const [isLogin, setIsLogin] = useContext(UserContext);

但仍然在login.js和signup.js中的同一行收到相同的错误-------Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))您的文本

然后我试着评论这行并获得了页面，但由于评论了这行而无法登录

请有人帮忙告诉我问题出在哪里，这样我的代码就可以工作了。我现在正处于空白页，上面的问题请有人建议提供答案

Answer 1

您收到此错误是因为您没有将组件封装在UserProvider中。例如，在顶部导入index.js后，您可以在index.js中执行此操作，如下所示：

import {UserProvider} from "./path/context"; // ⚠️ use the correct path
...
root.render(
<Provider store={store}>
<React.StrictMode>
<UserProvider>
<App />
</UserProvider>
</React.StrictMode>
</Provider>
);