“必须返回一个有效的React元素（或null）。”with array.map

Question

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

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

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

我收到错误：

Feed（...）：必须返回有效的React元素（或null）。 您可能已返回undefined，数组或其他一些无效对象。

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

Answer 1

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

如果您不想在DOM中包装元素，可以将数组包装在React.Fragment中。

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

Answer 2

您需要将数组包装在某个元素中

如果您不想将FeedCell包装在实际元素中，则可以使用React.Fragment ：

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

更多信息请访问： https ： //reactjs.org/docs/fragments.html

Answer 3

你能添加更多信息吗？ - FeedCell代码和Feed的父级。

尝试控制台记录道具并检查props.disputesToRender是否实际存在或在所有渲染调用中都有值。

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

您还应该添加<div>或<React.Fragment>来包含返回方法。 因为返回时应始终有一个父母。