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

来自文档，

目前，在组件的渲染中，您只能返回一个节点;如果你有一个要返回的div列表，你必须将你的组件包装在div，span或任何其他组件中

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

您可以删除多余的return语句

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

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

您必须确保映射的Bitmap srcBmp = new Bitmap(file.InputStream); int w = srcBmp.Width; int h = srcBmp.Height; if (srcBmp.Width > 2732 && srcBmp.Height > 2048) { w = 2732; h = 2048; } SizeF newSize = new SizeF(w, h); Bitmap target = new Bitmap(w, h); var destRect = new Rectangle(0, 0, w, h); HttpContext.Response.Clear(); HttpContext.Response.ContentType = "image/jpeg"; using (var graphics = Graphics.FromImage(target)) { graphics.CompositingMode = CompositingMode.SourceCopy; graphics.CompositingQuality = CompositingQuality.HighQuality; graphics.InterpolationMode = InterpolationMode.HighQualityBicubic; graphics.SmoothingMode = SmoothingMode.HighQuality; graphics.PixelOffsetMode = PixelOffsetMode.HighQuality; using (var wrapMode = new ImageAttributes()) { wrapMode.SetWrapMode(WrapMode.TileFlipXY); graphics.DrawImage(srcBmp, destRect, 0, 0, w, h, GraphicsUnit.Pixel, wrapMode); using (FileStream fileStream = new FileStream(fname, FileMode.Create)) { target.Save(fileStream, System.Drawing.Imaging.ImageFormat.Jpeg); } } }是有效的React元素。

Answer 3

原因是你没有从CompanyLogo方法返回任何东西，你很容易使用返回的map函数体。

像这样写：

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在我们想要为每个值返回一些内容时很有用，这里只有一家公司会满足if条件，所以在这种情况下，map不是正确的方法循环遍及所有公司，最好使用 Array.prototype.find()。

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

3 个答案: