Javascript 返回组件中的对象数组

我在主文件中调用了这个组件，这个组件显示所有数据，数据返回一个数组

    import React, { Component } from 'react';
    import {
        IonRow,
        IonCol
    } from '@ionic/react';
    
    import data from '../data/data.json';
    
    const BookList: React.FC = () => {
        
        return(
            data.data.map((context) => {
            <IonRow>
                <IonCol size="9">
                    <p>{context.name}</p>
                </IonCol>
                <IonCol size="3">
                    <p>{context.payload}</p>
                </IonCol>
            </IonRow>
            })
        );
        
    };
    
    export default BookList;

import React，{Component}来自'React'；
进口{
伊昂罗，
爱奥尼科尔
}来自“@ionic/react”；
从“../data/data.json”导入数据；
const BookList:React.FC=（）=>{
返回(
data.data.map（（上下文）=>{
{context.name}

{context.payload}

})
);
};
导出默认书目；

错误如下所示：

---

在书单的某个地方。我是新手，所以有点难理解主要问题是什么，我试图寻找任何解决方案，但找不到我理解的明确的解决方案。

您的代码返回了一个元素数组，请参见此

Type'（）=>JSX.Element[]”不可分配给类型“FC”

，只需使用

或react片段返回单个元素即可

试试这个：

const BookList: React.FC = () => (       
  <>
    {data.data.map(({ name, payload }) => (
      <IonRow>
           <IonCol size="9">
               <p>{name}</p>
           </IonCol>
           <IonCol size="3">
               <p>{payload}</p>
           </IonCol>
       </IonRow>
    ))}
  </>
);

const BookList:React.FC=（）=>（
{data.data.map（{name，payload}）=>(
{name}

{payload}

))}
);

您的代码返回了一个元素数组，请参见

Type'（）=>JSX.Element[]”不可分配给类型“FC”

，只需使用

或react片段返回单个元素即可

试试这个：

const BookList: React.FC = () => (       
  <>
    {data.data.map(({ name, payload }) => (
      <IonRow>
           <IonCol size="9">
               <p>{name}</p>
           </IonCol>
           <IonCol size="3">
               <p>{payload}</p>
           </IonCol>
       </IonRow>
    ))}
  </>
);

const BookList:React.FC=（）=>（
{data.data.map（{name，payload}）=>(
{name}

{payload}

))}
);

尝试从中删除{}map@HarmandeepSinghKalsi当我试图删除它时，类似于类型“（）=>JSX.Element[]”的错误不能分配给类型“FC”。类型“Element[]”缺少类型“ReactElement”中的以下属性：类型、props、keyTry从中删除{}map@HarmandeepSinghKalsi当我试图删除它时，类似于类型“（）=>JSX.Element[]”的错误不能分配给类型“FC”。类型“Element[]”缺少类型“ReactElement”中的以下属性：类型、道具、键应用答案后，错误显示类似此类型的内容“（）=>JSX。元素[]”不可分配给类型“FC”。类型“Element[]”缺少类型“ReactElement”中的以下属性：类型、props、keytry将返回值包装在react片段中，检查更新的answerdoes创建组件是否正确@heisaif？错误出现在函数组件的声明上。如果您可以在stackblitz中创建一个示例，我可以看一看。我当前正在创建stackblitz，仍在等待完成依赖项的安装。在应用答案后，错误显示类似于此类型的“（）=>JSX.Element[]”不可分配给类型“FC”。类型“Element[]”缺少类型“ReactElement”中的以下属性：类型、props、keytry将返回值包装在react片段中，检查更新的answerdoes创建组件是否正确@heisaif？这个错误出现在函数组件的声明中。如果您可以在stackblitz中创建一个示例，我可以看一下。我正在创建stackblitz，仍在等待完成依赖项的安装