如何将GraphQL服务器返回的数组数据展示到React-Table中

没问题，我来帮你搞定这个数组数据展示的问题！其实核心就是把GraphQL返回的数组直接传给React-Table的data属性，和你处理单个对象的逻辑类似，只是不用再手动把单个对象包装成数组了。我给你修改代码演示一下：

第一步：调整GraphQL查询（以玩具列表为例） #

先把你的查询改成返回数组的形式，比如：

const queryToyList = gql`
  query {
    toys { # 这里toys是数组类型的返回结果
      id
      title
      # 其他你需要的字段，比如价格、分类等
    }
  }
`

第二步：修改表格列配置 #

对应玩具的字段，调整columns数组：

const columns = [
  { Header: "玩具ID", accessor: "id" },
  { Header: "玩具名称", accessor: "title" }
  // 可以添加更多列，对应你查询的其他字段
]

第三步：修改Table组件的渲染逻辑 #

这里关键要处理异步加载的状态（避免请求未完成时data为空导致报错），并且直接使用返回的数组：

class Table extends React.Component {
  render() {
    const { data, loading, error } = this.props;
    
    // 处理加载中状态
    if (loading) return <div>加载中...</div>;
    // 处理查询错误状态
    if (error) return <div>查询出错：{error.message}</div>;

    // 直接把GraphQL返回的数组传给React-Table的data属性
    return (
      <div>
        <h2> 玩具列表 </h2>
        <ReactTable 
          data={data.toys} // 这里toys是GraphQL返回的数组
          columns={columns} 
          defaultPageSize={10} 
        />
      </div>
    );
  }
}

第四步：关联查询和组件 #

最后把查询和组件绑定：

const ToyListWithData = graphql(queryToyList)(Table);

export default ToyListWithData;

补充说明 #

你之前处理单个account对象时，需要把它放到数组里（[{ firstName: data.account.firstName... }]），因为React-Table要求data必须是数组格式。而当查询返回的本身就是数组（比如data.toys），直接传这个数组就满足React-Table的要求了，不需要额外包装。

另外，加上loading和error的判断非常重要，不然在请求还没完成的时候，data可能是undefined，会导致组件报错哦～

内容的提问来源于stack exchange，提问作者Khanh Tran