Return ionic reactjs 组件中的对象数组

Question

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

    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

你的代码是 returning 一个元素数组，看这个 Type '() => JSX.Element[]' is not assignable to type 'FC<{}>'，您只需要 return 使用 <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>
    ))}
  </>
);

Return ionic reactjs 组件中的对象数组

Return an array of object in a ionic reactjs component

javascript

reactjs

ionic-framework

ionic-react