コンポーネントコンポーネントのエラーは未定義ですが、nullを返す必要があります

Question

このコンポーネントをレンダリングしようとしていますが、エラーが発生し続けますA valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.何も返さないため、何が問題なのかわかりません。返すものがない場合はnullです。

どのような考えですか？

コンポーネント：CompanyLogo

function CompanyLogo(props) { 
    props.companies.map((company) => { 
    if (props.companyId == company._id) { 
     console.log("Test to see if firing"); 
     return <p>Return as a test</p>; 
    } 
    return null 
    }) 
} 

Answer 1

Maximum Number of JSX Root Nodes

、

現在、コンポーネントのレンダリングでは、1つのだけのノードを返すことができます。あなたが持っている場合、たとえば、div要素のリストは、あなたがDIV、スパンまたはあなたが冗長return文を削除することができます

function CompanyLogo(props) { 
    props.companies.map((company) => { 
    if (props.companyId == company._id) { 
     console.log("Test to see if firing"); 
     return (<p>Return as a test</p>); 
    } 
    return (<p></p>) 
    }) 
} 

他のコンポーネント内にコンポーネントをラップする必要があり、戻り

function CompanyLogo(props) { 

    let component = <p></p>; 
    props.companies.map((company) => { 
     if (props.companyId == company._id) { 
      console.log("Test to see if firing"); 
      component = <p>Return as a test</p>; 
     } 
    }); 
    return component; 
} 

Answer 2

CompanyLogo(props)関数は何も返しません。これは、関数にreturnを追加してみてください、何かを返す必要があります：

function CompanyLogo(props) { 
    let elementsArr = props.companies.map((company) => { 
    if (props.companyId == company._id) { 
     console.log("Test to see if firing"); 
     return <p>Return as a test</p>; 
    } 

    return null; 
    }); 

    return (<div>{elementsArr}</div>); 
} 

はあなたがマッピングされたprops.companiesが有効なのかの要素を反応させるのであることを確認する必要があります。ドキュメントから

Answer 3

理由はCompanyLogoメソッドから何も返されていない、あなたはマップ関数本体の中でリターンを使用して簡単です。

このようにそれを書く：

function CompanyLogo(props) { 
    let result = props.companies.map((company) => { 
     if (props.companyId == company._id) { 
       return <p>Return as a test</p>; 
     } 
     return null; 
    }); 
    return <div> {result} </div>  //add this return 
} 

あなたがternary operatorを使用して、このようにそれを書くことができます同じコード：

function CompanyLogo(props) { 
    let result = props.companies.map(company => props.companyId == company._id ? 
      <p> Return as a test </p> 
     : 
      null 
    }); 
    return <div> {result} </div> //add this return 
} 

提案：私たちは、それぞれのために何かを返したいときmapに便利です価値がある場合、ここでは1つの企業だけが条件を満たします。この場合、マップはすべての企業をループする正しい方法ではありません。Array.prototype.find()。