如何将 ReactTable 与 useQuery 一起使用？

Question

除了'ReactTable ...'，代码运行完美，当我添加ReactTable屏幕变成空白并在控制台上弹出错误下方

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

这是代码。 {data.searches} 包含查询数据。 当我使用 {JSON.stringify(data.searches)} 它返回字符串但是当我在 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" 。 对我来说，现在它工作正常，它可能会帮助一些人。