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（...）：必须返回有效的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>来包含您的return方法。因为退货时总是应该有一个单亲。

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

3 个答案: