reactjs - react 错误 : Functions are not valid as a React child

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 子节点无效。如果您返回 Component 而不是从 render 返回，则可能会发生这种情况。或者，您可能打算调用此函数而不是返回它。
在 div ( 在 Testmap2.jsx:37)
在 Testmap2 中(在 src/index.js:13)
在严格模式下(在 src/index.js:11)

Answer 1

你需要调用你的函数

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

const testmapd是引用您定义的箭头函数的变量(ES6)
如果您要使用 console.log testmapd，它会打印函数体，因为这是变量指向的内容。当您添加 ()在函数之后，它被调用/运行并返回一些东西。
在您的情况下，您不需要函数定义，而是您的函数返回的语句。