Javascript &引用；必须返回有效的React元素（或null）。”；使用array.map

我的功能反应组件定义如下：

import React from 'react';
import Cell from './FeedCell';
import PropTypes from 'prop-types';

const Feed = (props) => {
        return props.arr.map((type, index) => {
            return (<Cell />)
        })
};

从“React”导入React；
从“./FeedCell”导入单元格；
从“道具类型”导入道具类型；
常量提要=（道具）=>{
返回props.arr.map（（类型，索引）=>{
返回（）
})
};

我得到一个错误：

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

---

我觉得这应该是显而易见的，但我已经尝试了在线提供的解决方案，但我遗漏了一些东西。

您需要将数组包装在一些元素中

如果您不想将

FeedCell

s包装在实际元素中，可以使用

React.Fragment

：

const Feed = (props) => {
    return (
        <React.Fragment>
            { props.arr.map((type, index) => <Cell />) }
        </React.Fragment>
    );
};

const Feed=（道具）=>{
返回(
{props.arr.map（（类型，索引）=>）}
);
};

更多信息请点击此处：

---

您当前正在返回一个数组，但必须返回正确的React元素

如果不想在DOM中使用包装元素，可以将数组包装为

React.Fragment

const Feed = (props) => {
  return (
    <React.Fragment>
      {props.arr.map((type, index) => <Cell />)}
    </React.Fragment>
  );
};

const Feed=（道具）=>{
返回(
{props.arr.map（（类型，索引）=>）}
);
};

您可以添加更多信息吗？-FeedCell代码和Feed的父级

请尝试控制台记录props，并检查props.disputesToRender是否确实存在或在所有渲染调用中是否有值

检查FeedCell是否实际返回html或返回html的组件

---

您还应该添加一个

或

来包含您的返回方法。因为退货时应该始终有一个单亲。

只需升级到react v16，您的代码就有效了。