[英]“A valid React element (or null) must be returned.” with array.map
I have the Functional React component defined below: 我有下面定义的功能反应组件:
import React from 'react';
import Cell from './FeedCell';
import PropTypes from 'prop-types';
const Feed = (props) => {
return props.arr.map((type, index) => {
return (<Cell />)
})
};
I am getting the error: 我收到错误:
Feed(...): A valid React element (or null) must be returned. Feed(...):必须返回有效的React元素(或null)。 You may have returned undefined, an array or some other invalid object. 您可能已返回undefined,数组或其他一些无效对象。
I feel like this should be obvious but I have tried the solutions presented online but I am missing something. 我觉得这应该是显而易见的,但我尝试过在线提供的解决方案,但我遗漏了一些东西。
You are currently returning an array, but you must return a proper React element. 您当前正在返回一个数组,但您必须返回一个正确的React元素。
You can wrap your array in a React.Fragment
if you don't want a wrapping element in the DOM. 如果您不想在DOM中包装元素,可以将数组包装在React.Fragment
中。
const Feed = (props) => {
return (
<React.Fragment>
{props.arr.map((type, index) => <Cell />)}
</React.Fragment>
);
};
You need to wrap your array in some element 您需要将数组包装在某个元素中
If you don't want to wrap your FeedCell
s in an actual element, you can use React.Fragment
instead: 如果您不想将FeedCell
包装在实际元素中,则可以使用React.Fragment
:
const Feed = (props) => {
return (
<React.Fragment>
{ props.arr.map((type, index) => <Cell />) }
</React.Fragment>
);
};
More information here: https://reactjs.org/docs/fragments.html 更多信息请访问: https : //reactjs.org/docs/fragments.html
Can you add more information? 你能添加更多信息吗? - FeedCell code and the parent of Feed. - FeedCell代码和Feed的父级。
Try console logging the props and check if props.disputesToRender actually exists or has value in all your render calls. 尝试控制台记录道具并检查props.disputesToRender是否实际存在或在所有渲染调用中都有值。
Check if FeedCell actually returns html or a component that returns an html. 检查FeedCell是否实际返回html或返回html的组件。
You should also add a <div>
or <React.Fragment>
to enclose your return method. 您还应该添加<div>
或<React.Fragment>
来包含返回方法。 Since there should always be a single parent on returns. 因为返回时应始终有一个父母。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.