"必须返回有效的React元素(或null)." 与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元素.

React.Fragment如果您不想在DOM中使用包装元素,则可以将数组包装在一个数组中.

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