React开发Instagram克隆时注册表单邮箱密码状态无法读取求助

问题原因 #

核心问题是signUp函数定义在了App组件的外部，组件内部声明的email、password、username等状态变量属于组件内部作用域，外部函数无法访问这些状态值，因此调用注册接口时传入的都是未定义的值，逻辑自然不会生效。

修复方案 #

1. 将当前写在App组件外的signUp函数整体剪切，放到App组件内部，建议放在所有useState声明之后、useEffect逻辑之前的位置即可。
2. 可以补充注册成功后自动关闭弹窗的逻辑，优化使用体验，修改后的signUp参考代码如下：

const signUp = (event) => {
  // 阻止表单默认提交刷新页面的行为
  event.preventDefault();

  auth
    .createUserWithEmailAndPassword(email, password)
    .then(() => {
      setOpen(false); // 注册成功关闭注册弹窗
    })
    .catch((error) => alert(error.message));
};

3. 两个不影响功能但建议优化的小问题：

• 邮箱、密码输入框的placeholder属性都误写为了username，可以分别修改为对应提示文字，避免用户输入错误
• 你当前的代码混用了@mui/material和@material-ui/core两个不同版本的Material UI依赖，后续统一为同一个版本可以避免出现奇怪的样式或交互异常。

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