React Table呈现未定义的数据

Question

我目前正在处理一个React表，该表将由REST API调用填充。输出如下：

[{"zone":"Central","location":"Atlantic Superstore","address":"650 Portland St, Dartmouth","date":"05/13/2021","exposure":"09:00 - 11:30","advice":"Get tested immediately"},{"zone":"Central","location":"Sobeys Mumford","address":"6990 Mumford Road, Halifax","date":"31/05/2021","exposure":"13:00 - 14:30","advice":"Get tested Immediately"}]

我用以下代码来称呼它：

export function GetContacts() {
const [loadingData, setLoadingdata] = useState(true);
const [contacts, setContacts] = useState([]);

useEffect(() => {
fetch(
`https://mz6gux8sca.execute-api.us-east-1.amazonaws.com/dev/contact`,
{
method: 'GET'
}
)
.then(res => res.json())
.then(response => {
setContacts(response);
setLoadingdata(false);
})
.catch(error => console.log(error));
}, [])
console.log("contacts: ", contacts)
const columns = React.useMemo(
() => [
{
Header: "Zone",
accessor: "zoneID", 
},
{
Header: "Location",
accessor: "contactLocation",
},
{
Header: "Address",
accessor: "address",
},
{
Header: "Date",
accessor: "date",
},
{
Header: "Window",
accessor: "exposureWindow",
},
{
Header: "Advice",
accessor: "advice",
},
],
[],
);

这很有效，在控制台中我得到了一个正确填充的联系人列表。然而，只要我添加以下内容：

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, contacts }, useSortBy)

抛出一个错误，并且联系人的控制台输出为空。错误为TypeError: Cannot read property 'forEach' of undefined。--大概是因为联系人是空的。如果我去掉那个块，一切都会恢复正常工作。我在这里不知所措，所以任何见解都将不胜感激。

Answer 1

我认为您以错误的方式传递钩子选项。React Table需要data选项，因此useTable({ columns, data: contacts })应该可以工作。