React报错setIsLoggedin is not a function的原因排查及登录后隐藏SignUp组件

核心问题：语法拼写错误 #

你的Login组件第一行的onst是拼写错误，应该是const。这个低级语法错误会导致组件无法正确解析，进而无法接收父组件传递的setIsLoggedin props，最终调用时触发“不是函数”的报错。

修复后的组件开头：

const Login = ({setIsLoggedin}) => {

额外优化建议 #

• 冗余请求配置：axios.post的第二个参数就是请求体，你额外添加的body字段完全多余，简化后代码更清晰：

axios.post("http://localhost:4000/signin/auth", values)

• 登录成功判断逻辑：不要仅通过if(res)判断登录成功，建议根据后端返回的具体状态码或业务字段（比如res.data.code或res.data.success）验证，避免请求成功但登录实际失败的情况。
• SignUp路由逻辑反转：当前isLoggedin ? <SignUp/> : null的逻辑是登录后才显示注册页，不符合常规业务逻辑，应该改为：

<Route path="/SignUp" element={!isLoggedin ? <SignUp/> : null }/>

这样未登录状态下才允许访问注册页面。

修复后的完整Login.jsx代码 #

const Login = ({setIsLoggedin}) => {
    const navigate = useNavigate();
    const [values, setValues] = useState({
        email: "",
        password: "",
    });

    const handleSubmit = async (e) => {
        e.preventDefault();

        localStorage.setItem('token-info', JSON.stringify(values));

        axios.post("http://localhost:4000/signin/auth", values)
            .then((res) => {
                // 根据后端实际返回的字段判断登录成功
                if(res.data.success){
                    setIsLoggedin(true);
                    navigate('/Dashboard');
                }
            })
            .catch((err) => console.error(err));
    };
    return (
        <div className="sign-up__container">
            <div className="sign-up__title">
                <h1>Sign In</h1>
            </div>
            <div className="input-container">
            <form onSubmit={handleSubmit}>
                <label>email
                <input type="email"
                name="email"
                onChange={(e) => setValues({ ...values, email: e.target.value })}
                ></input>
                </label>

                <label>password
                <input type="password"
                 name="password"
                 onChange={(e) => setValues({ ...values, password: e.target.value })}
                ></input>
                </label>
                <input type="submit" />
                <p>Not registered? <NavLink to="/SignUp">Sign up here!</NavLink> | Forgot your password?</p>
            </form>
            </div>
        </div>
    )
}

export default Login;

内容的提问来源于stack exchange，提问作者SwedieK