将数组从GraphQL查询传递到React-Table [英] Pass array from GraphQL query to React-Table
本文介绍了将数组从GraphQL查询传递到React-Table的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试获取GraphQL查询的数组输出并使用React-Table呈现它,但是却收到了无法读取未定义属性'forEach'的错误
.
I am trying to take the array output of a GraphQL query and render it using React-Table but I am getting a Cannot read property 'forEach' of undefined
error.
The only other question similar to mine that I have managed to find has not helped (How to show data from GraphQL server to npm react-table?). When I printed the query result to the console it looks like a normal array to me so I am not sure why forEach does not recognise it.
组件代码:
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;
应用代码:
...
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<div>
<h2>My first Apollo app</h2>
<Templates />
</div>
</ApolloProvider>
);
}
}
render(<App />, document.getElementById("root"));
推荐答案
您的react表语法错误,应该是这样的
Your syntax for react table is wrong, it should be something like this
<ReactTable
data={data.getTemplates}
columns={columns}
defaultPageSize={10}
/>
这篇关于将数组从GraphQL查询传递到React-Table的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文