javascript - 在 ionic reactjs 组件中返回一个对象数组

Question

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

    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;

错误是这样的：

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

Answer 1

您的代码正在返回一个元素数组，请参阅这个 Type '() => JSX.Element[]' is not assignable to type 'FC<{}>'，您所需要的只是使用或反应片段返回单个元素，<div>即 <> </>

试试这个：

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>
    ))}
  </>
);