Reagieren statuslose Funktionskomponente sollte Null zurückgeben, aber Fehler erhalten

Question

Ich habe eine einfache Komponente, um ungültige Formulareinträge anzuzeigen, die offensichtlich nur eine Nachricht wiedergeben sollte, wenn die Formulareinträge ungültig sind. Soweit ich das beurteilen kann, habe ich die bedingten Return-Anweisungen korrekt verwendet, bekomme aber immer noch einen Fehler.

Hier ist die Komponente:

Import von React 'reagieren'; Import PropTypes von 'Prop-Typen';

function FormErrors ({formErrors}) { 
    Object.keys({formErrors}).map((field, i) => { 
     if ({formErrors}[field].length > 0) { 
      return (
       <p key={i}>{field} {formErrors[field]}</p> 
      ) 
     } else { 
      return null; 
     } 
    }) 
} 

export default FormErrors; 

Die Requisiten in weitergegeben werden:

formErrors: {email: '', password: ''}; 

und die Fehlermeldung Ich erhalte:

Invariant Violation: FormErrors(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Answer 1

nichts zurückgegeben wurde aus machen.

Sie verpassen eine return

function FormErrors ({formErrors}) { 
    return Object.keys({formErrors}).map((field, i) => { 
    // ^^ add this return 
     if ({formErrors}[field].length > 0) { 
      return (
       <p key={i}>{field} {formErrors[field]}</p> 
      ) 
     } else { 
      return null; 
     } 
    }) 
}