反应错误：函数作为反应子无效

Question

我正在尝试从 MAP 呈现列表输出。出现此错误是我编码错误是什么原因？

import React from 'react';


function Testmap2() {
    
const list = [
    {
        id: 'a',
        firstname: 'Robin',
        lastname: 'Wieruch',
        year: 1988,
    },
    {
        id: 'b',
        firstname: 'Dave',
        lastname: 'Davidds',
        year: 1990,
    },
];


 
    const testmapd = () => (
        <ul>
            {list.map(item => (
                <li key={item.id}>
                    <div>{item.id}</div>
                    <div>{item.firstname}</div>
                    <div>{item.lastname}</div>
                    <div>{item.year}</div>
                </li>
            ))}
        </ul>
    );

    return (
        <div>
            {testmapd}
        </div>
    )
}
export default Testmap2;

错误： 1.chunk.js:77900 警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。 在 div 中（在 Testmap2.jsx:37） 在 Testmap2 中（在 src/index.js:13） 在 StrictMode 中（在 src/index.js:11）

Answer 1

你需要调用你的函数

<div>
   {testmapd()}
</div>

const testmapd 是一个引用你定义的箭头函数的变量（ES6）

如果您要使用 console.log testmapd，它会打印函数体，因为这是变量指向的内容。当您在函数后添加() 时，它会被调用/运行并返回一些内容。

在您的情况下，您不需要函数定义，而是函数返回的语句。

Answer 2

您的testmapd 基本上是一个 React 功能组件。像这样对待它：

const Testmapd = () => (
    <ul>
        {list.map(item => (
            <li key={item.id}>
                <div>{item.id}</div>
                <div>{item.firstname}</div>
                <div>{item.lastname}</div>
                <div>{item.year}</div>
            </li>
        ))}
    </ul>
);

return (
    <div>
        <Testmapd />
    </div>
)