Javascript 将数组从GraphQL查询传递到React表

我试图获取GraphQL查询的数组输出，并使用React表呈现它，但我得到了一个

无法读取未定义的属性“forEach”的错误

我设法找到的另一个类似于我的问题也没有帮助（）。当我将查询结果打印到控制台时，它看起来像一个普通数组，所以我不确定为什么forEach不能识别它

组件代码：

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

import ReactTable from 'react-table';
import "react-table/react-table.css";

const getTemplatesQuery = gql`
{
    getTemplates {
        id
        name
    }
}
`;

const columns = [
    {
        Header: "ID",
        accessor: "id"
    },
    {
        Header: "Name",
        accessor: "name"
    }
];

const Templates = () => (
    <Query 
        query = {getTemplatesQuery}>
        {({ loading, error, data }) => {
            if (loading) return <p>Loading...</p>;
            if (error) return <p>error</p>;

            // return data.getTemplates.map(({ id, name }) => (
            //     <p key={id} >{`${name}`}</p>
            // ));

            console.log(data);

            return (
                <div>
                    <ReactTable>
                        data = { data.getTemplates }
                        columns = { columns }
                        defaultPageSize = { 10 }
                    </ReactTable>
                </div>
            );
        }}
    </Query>
)

export default Templates;

从“React”导入React；
从'react apollo'导入{Query}；
从“graphql标签”导入gql；
从“反应表”导入反应表；
导入“react table/react table.css”；
const getTemplatesQuery=gql`
{
获得模板{
身份证件
名称
}
}
`;
常量列=[
{
标题：“ID”，
访问者：“id”
},
{
标题：“姓名”，
访问者：“名称”
}
];
常量模板=（）=>(
{（{加载，错误，数据}）=>{
如果（加载）返回加载…
；
if（error）返回error
；
//返回data.getTemplates.map（（{id，name}）=>(
//
{`${name}}
// ));
控制台日志（数据）；
返回(
数据={data.getTemplates}
列={columns}
defaultPageSize={10}
);
}}
)
导出默认模板；

应用程序代码：

...
class App extends Component {
    render() {
        return (
            <ApolloProvider client={client}>
            <div>
                <h2>My first Apollo app</h2>
                <Templates />
            </div>
        </ApolloProvider>
        );
    }
}

render(<App />, document.getElementById("root"));

。。。
类应用程序扩展组件{
render（）{
返回(
我的第一个阿波罗应用程序
);
}
}
render（，document.getElementById（“根”））；
您的react表语法错误，应该是这样的

<ReactTable
  data={data.getTemplates}
  columns={columns}
  defaultPageSize={10}
/>

我还以为我已经检查了所有的打字错误：（谢谢！很乐意帮助：）我强烈建议您使用带有airbnb配置的过梁（eslint）。它解决了很多这样的问题。