javascript - "A valid React element (or null) must be returned."与 array.map

Question

我在下面定义了 Functional React 组件:

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(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

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

Answer 1

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

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

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