React表未通过foreach错误加载

Question

我遇到了一个错误的错误，即“未定义的typeError：无法读取未定义的属性（读取'foreach'）”

看来它位于我的桌子组件中。

这是我的桌子组件的代码。

import React from 'react';
import { useTable } from 'react-table';

export interface TableProps {
    columns: any;
    data: any
};

const TableOne:React.FC<TableProps> = ({columns, data}) => {
   

    const tableInstance = useTable({columns, data});

    const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = tableInstance;

  // Render the UI for your table
  return (
    <table {...getTableProps()} >
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default TableOne

如您所见，我只是使其成为功能性组件，并且可以将道具发送到组件中，以便将其用于多个数据集。这是React-Table站点上的模板代码中的副本和粘贴代码。

在我的主页中，我有以下代码。

import React, {useMemo} from 'react'
import Table from '../components/Table'
import {gql, useQuery} from "@apollo/client"
import TableOne from '../components/TableOne'

const style ={
    hero:`bg-green-500 w-full h-96 p-2`
}

const AllCategoriesQuery = gql`
  query {
    allCategories { 
      name
  }
  }
` 

const Home = () => {

  const {data, loading, error} = useQuery(AllCategoriesQuery, {
    onCompleted: data => {
        console.log(data)
    }
})


  const columns = useMemo(() => [
    {
      Header: "Name",
      accessor: "name"
    },
  ], [data])
   
   
  return (
    <div className={style.hero}>
        Home123
        {/* <Table /> */}
        
        <TableOne columns={columns} data={data}  />
        
    </div>
  )
}

export default Home

我只是简单地将我的Apollo-client数据越过了，但是当我运行它时，我的整个应用程序都会消失。它不仅会使页面消失，还可以使此页面之外的其他组件。

任何帮助都很棒！

编辑：错误的屏幕截图

Answer 1

尝试以下操作：

return (
    <div className={style.hero}>
        Home123
        {/* <Table /> */}
        
        {data && <TableOne columns={columns} data={data}  /> }
        
    </div>
  )