ステートレス機能コンポーネントは無効ですnullを返すがエラーを受け取る

Question

無効なフォームエントリを表示する単純なコンポーネントがあります。フォームエントリが無効な場合にのみメッセージを表示する必要があります。私が知る限り、条件付きのreturn文を正しく使用しましたが、まだエラーが発生しています。ここで

は、コンポーネントの：

インポートは「反応」からリアクト。 'prop-types'のPropTypesをインポートします。

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; 

小道具は、渡される：

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

そして、私が受けていたエラーメッセージ：

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

Answer 1

は何もレンダリングから返されませんでした。

あなたは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; 
     } 
    }) 
}