如何将 ReactTable 与 useQuery 一起使用？

Question

除了 'ReactTable...'，代码是运行完美，当我添加 ReactTable 时，屏幕变成空白，并在控制台

下方弹出错误

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

这是代码。 {data.searches} 包含查询数据。当我使用 {JSON.stringify(data.searches)} 它 returns 字符串但是当我在 ReactTable 中使用 {data.searches} 或 {[data.searches]} 它显示在上面错误。

MobileInfo.js

import React, {useState} from 'react'
import ReactTable from 'react-table'
//import 'react-table/react-table.css'
import gql from "graphql-tag"
import {Query} from 'react-apollo'
import {useQuery} from 'react-apollo'
import Error from './Forms/Errors'
import Loading from './Forms/Loading'

const LIST_INFO= gql`

query searches ($search:String!)
{
    searches(search:$search)
      {
      name  
        Launch
        Display
        Color
        Memory  
    }
  }
`

const Search=()=>{

       const clickHandler= async ()=>{
        setSearch(sSearch);
        console.log(data.searches);
        content=data.searches;

       };        
        const [search, setSearch]= useState('') 
        const {data, loading, error}=useQuery(LIST_INFO, {
            variables: { search }
        });

        let sSearch;
        let content;
            if (loading) return <Loading/>;
            if (error) return <Error error={error}/>;
            const mobile = data.searches;
           // content = ` info: ${mobile.name} Launch: ${mobile.Launch}`
           const columns = [
            {
                Header: "LAUNCH",
                accessor: "Launch"
            },
            {
                Header: "NAME",
                accessor: "name"
            },
            {
                Header: "DISPLAY",
                accessor: "Display"
            },
            {
                Header: "COLOR",
                accessor: "Color"
            },
            {
                Header: "MEMORY",
                accessor: "Memory"
            }
        ]
        return (
            
            <div>
                     
              <input type="text" onChange={ (e) => {sSearch=e.target.value}}/>
             <button onClick={clickHandler} value={search} >
               Search
                </button> 
                <div><p>{JSON.stringify(data.searches)}</p></div>
                <ReactTable data={data.searches} columns={ columns } />  
            
            </div>
            )
        };
export default Search;

Answer 1

解决方法是将import ReactTable from 'react-table'换成import ReactTable from "react-table-6"。对我来说现在它工作正常，它可能会帮助一些人。

如何将 ReactTable 与 useQuery 一起使用？

How to use ReactTable with useQuery?

javascript

reactjs

graphql

react-apollo

react-table