React中useState关联prop传递异常：子组件获username为undefined

父组件代码 #

const [username, setusername] = useState(null);
const onSubmit = async (data) => {
    try {
      await fetch("http://localhost:3000/logout", {
        method: "POST",
        credentials: "include",
      });

      const response = await fetch("http://localhost:3000/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
        credentials: "include",
      });

      if (response.ok) {
        setusername(data.username);
      } else {
        console.error("Login failed");
      }
    } catch (error) {
      console.error("An error occurred during login", error);
    }
  };

return (
    <>
      <Home username={username} />
      <Main username={username} />
    </>
)

Main组件代码 #

const Main = ({ username }) =>{

return (
    <>
      <div>
        <h1>
          Hey, {username}
        </h1>
</div>
    </>
  );
};

排查步骤与解决建议 #

• 确认data.username的有效性：在setusername(data.username)前加console.log(data)，检查提交的data对象里是否真的存在username字段。有可能表单提交的data键名是userName（驼峰）或其他拼写，导致data.username本身就是undefined。
• 检查Home组件的prop接收逻辑：你只提供了Main组件代码，Home组件可能未正确解构username。比如是否写成const Home = (props) => { ... }但未使用props.username，或者解构时拼写错误（如const Home = ({ userName }) => { ... }）。
• 验证父组件渲染时的username值：在父组件return语句上方加console.log("父组件渲染，username:", username)，确认组件重渲染时username是预期值。如果父组件值正确但子组件拿到undefined，要排查是否有组件缓存、复用或上下文覆盖的问题。
• 处理初始状态显示：父组件初始username为null，子组件可添加默认值避免显示异常，比如const Main = ({ username = "Guest" }) => { ... }，或渲染时做判断：Hey, {username ?? "Guest"}。
• 改用接口响应数据设置状态：避免依赖表单提交的data，在response.ok后从接口响应中取用户信息：const userData = await response.json(); setusername(userData.username);，确保数据来源准确。

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