React子组件向父组件传值失败，请求排查问题

1. setState异步特性导致即时打印旧值 #

React的useState状态更新是异步的，你在调用setLogin({email: childData})后立刻执行console.log(login)，此时状态还未完成更新，打印的是更新前的初始值{email: ""}。

要查看更新后的状态，需通过useEffect监听login的变化：

import { useState, useEffect } from "react";

function RouteSwitch(){
    const [login, setLogin] = useState({email: ""});

    useEffect(() => {
        // login状态更新时触发打印
        console.log(login);
    }, [login]);

    function childToParentLogin(childData){
        setLogin({email: childData});
    }

    // 其余代码不变
}

2. 页面刷新导致状态丢失 #

你用window.location.href跳转页面会触发浏览器全局刷新，RouteSwitch组件会重新挂载，login状态被重置为初始值{email: ""}，所以User组件拿到的是空邮箱对象。

应使用react-router-dom的useNavigate钩子实现单页跳转，避免页面刷新：

修改Login.js： #

import "../styles/Login.css";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import Axios from "axios";

function Login({ childToParentLogin }){
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [response, setResponse] = useState("");
    const navigate = useNavigate();

    async function handleSubmit(){
       // 其余验证逻辑不变
        try {
            const data = await Axios.post(url, formData);
            if(data.data === "Correct data"){
                childToParentLogin(email);
                navigate("/login/user"); // 与RouteSwitch中的路由路径保持一致
            }
            setResponse(data.data);
        }catch(erro){
            console.log(erro);
        }
    }
    return (
        ...
    );
}

export default Login;

注意：确保跳转路径/login/user与RouteSwitch中User组件的路由路径完全匹配，之前的/login/usuario路径需修正一致。

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