React 登录错误消息在第一次调用时返回未定义，然后在第二次调用时显示错误

Posted 2023-03-05

【中文标题】React 登录错误消息在第一次调用时返回未定义，然后在第二次调用时显示错误

【英文标题】：React login error message returns undefined on first call then displays error on second call

【发布时间】：2022-01-11 22:13:09

【问题描述】：

我正在尝试根据 firebase 错误消息添加一些验证。我正在将子组件中的数据传递给父组件中的 fetch 方法，如果有错误消息，则在子组件中显示该消息。

父组件获取方法

const sendData = async () => 
    let url;
      if (action === 'LOGIN') 
        url =
          'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyDhbI0X34ZPurUHsRtCas4ybNHgCLQqEfs';
       else 
        url =
          'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyDhbI0X34ZPurUHsRtCas4ybNHgCLQqEfs';
      
      const response = await fetch(url, 
        method: 'POST',
        body: JSON.stringify(userData),
        headers:  'Content-Type': 'application/json' ,
      );
      const data = await response.json();
      if (!response.ok) 
        // Make error messages user friendly based on firebase error messages.
        if (action === 'LOGIN') 
          authCtx.displayError(data.error.message, 'LOGIN');
          setError(authCtx.errorMessage)
         else 
          authCtx.displayError(data.error.message, 'SUBMIT');
          setError(authCtx.errorMessage)
        
        return;
      

上下文文件

 const [error, setError] = useState(error:"");

 const displayError = (errorMessage, action) => 
    if (action === 'LOGIN') 
      switch (errorMessage) 
        case 'INVALID_PASSWORD':
          setError('Incorrect password, please try again!');
          break;
        case 'EMAIL_NOT_FOUND':
          setError('Email not found in system, please sign up.');
          break;
        case 'INVALID_EMAIL':
          setError("Please don't leave the email field blank!");
          break;
        case 'MISSING_PASSWORD':
          setError("Please don't leave password field blank!");
          break;
        default:
          setError(
            'Too many failed attempts on this account, please wait a few minutes or reset your password to try again!'
          );
          break;
      
     else 
      switch (errorMessage) 
        case 'EMAIL_EXISTS':
          setError('Email already exists, please try again or sign in.');
          break;
        case 'MISSING_PASSWORD':
          setError("Please don't leave password field blank!");
          break;
        case 'MISSING_EMAIL':
          setError("Please don't leave the email form blank!");
          break;
        case 'WEAK_PASSWORD : Password should be at least 6 characters':
          setError('Weak password, password should be at least 6 characters!');
          break;
        default:
          setError('Something went wrong, please try again!');
          break;
      
    
    console.log(error)
  ;


const contextValue = 
    errorMessage: error,
    displayError,
  ;

如果响应不正确，我将通过我的上下文文件发送错误消息并在相应消息上设置我的错误状态。问题是第一个错误消息总是返回 undefined，然后第二个包含原始错误消息。

示例）邮箱：[e-mail]，密码：password 应该返回错误消息“电子邮件未注册”，但第一次返回未定义，当我再次单击它时，它会显示错误。我最初在 fetch (!response.ok) 中有 switch 语句，但将其移动到单独的文件中，以便立即显示。我觉得这是因为在第一次渲染时，状态未定义，但无法弄清楚如何修复它。

提前致谢！

【参考方案1】：

更新：我通过在子组件中运行 useEffect 挂钩并使用上下文文件中的错误消息作为依赖项来解决这个问题！

useEffect(() => 
// Formatted error is the context error value
    setError(formattedError)
    const showError = setTimeout(() => 
      setError()
    , 3000)
    return () => 
      clearInterval(showError)
    
  , [formattedError])