Reactjs React组件错误未定义，但应返回null

我试图让这个组件呈现，但我一直得到错误

，必须返回一个有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象。

我不知道问题出在哪里，因为如果没有可返回的内容，我将返回

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
  })
}

function companygo（道具）{
道具.公司.地图（（公司）=>{
如果（props.companyId==公司id）{
控制台日志（“测试以查看是否点火”）；
返回作为测试返回；
}
返回空
})
}
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>);
}

function companygo（道具）{
让elementsArr=props.companys.map（（company）=>{
如果（props.companyId==公司id）{
控制台日志（“测试以查看是否点火”）；
返回作为测试返回；
}
返回null；
});
返回（{elementsArr}）；
}

但是，您必须确保映射的
props.companys
是有效的React元素。

从文件来看

当前，在组件的渲染中，只能返回一个节点；如果要返回div列表，则必须将组件包装在div、span或任何其他组件中

function companygo（道具）{
道具.公司.地图（（公司）=>{
如果（props.companyId==公司id）{
控制台日志（“测试以查看是否点火”）；
返回（作为测试返回
）；
}
返回（
）
})
}

您可以删除多余的返回语句

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;
}

function companygo（道具）{
让分量=
；
道具.公司.地图（（公司）=>{
如果（props.companyId==公司id）{
控制台日志（“测试以查看是否点火”）；
组件=作为测试返回
；
}
});
返回组件；
}
原因是您没有从
CompanyLogo
方法返回任何内容，您只需在map函数体内使用return

这样写：

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
}

function companygo（道具）{
让结果=props.companys.map（（company）=>{
如果（props.companyId==公司id）{
返回作为测试返回；
}
返回null；
});
返回{result}//添加此返回
}

同样的代码，您可以通过以下方式编写：

function companygo（道具）{
让result=props.companys.map（company=>props.companyId==company.\u id？
作为测试返回

:
无效的
});
返回{result}//添加此返回
}

建议：
映射
在我们希望为每个值返回某些值时很有用，这里只有一个公司会满足if条件，因此在这种情况下，映射不是循环所有公司的正确方法，最好使用
很好的答案。使用
.some（）
，而不是
.map
。如果你的对手是说，logo#2，你还有50个，为什么还要继续循环？
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
}

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 
}