";必须返回有效的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(。您可能返回了未定义的、数组或其他无效对象。

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

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>来包含您的返回方法。因为回报应该总是有一个单亲。