无法在MaterialTable中使用useEffect挂钩显示数据

Question

import React,{useEffect, useState} from 'react';
import MaterialTable from 'material-table';
import axios from 'axios';
// function for adding the 
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
columns: [
{ title: 'Id', field: 'Id' },
{ title: 'Todo', field: 'Todo' },
{ title: 'Description', field: 'Description', type: 'numeric' },
],
data: [],
});
// get the state here   
useEffect(()=>{
axios.get('http://localhost:4000/todos').then((res)=>{
{console.log(res.data)}
state.data = res.data
{console.log(state)}
})
})
return (
<MaterialTable
title="Todo Example"
columns={state.columns}
data={state.data}
/>
);

}

1( ｛console.log(state(｝正在useEffect挂钩中打印以下数据

{columns: Array(3), data: Array(7)}
columns: (3) [{…}, {…}, {…}]
data: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__: Object

2( 在我的材料表里面没有显示任何数据，我不知道为什么？但我可以看到我的列名

3( 我的后台api正在工作，我正在获得响应

4( 我不知道是什么导致了错误，无论是异步性质还是钩子的使用

5( 我的页面不断向api发送请求，请求如何使其作为componentdid mount((工作

Answer 1

columns道具中的field属性(键(应与data道具中的属性(密钥(匹配。例如：

import React, { useEffect, useState } from "react";
import MaterialTable from "material-table";
export default function App() {
const [state, setState] = React.useState({
columns: [
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" }
],
data: [{ name: "Zain", surname: "Ul Abideen" }]
});
return (
<MaterialTable
title="Todo Example"
columns={state.columns}
data={state.data}
/>
);
}

CodeSandBox

提示：

设置状态的正确方法是：

useEffect(()=>{
axios.get('http://localhost:4000/todos').then((res)=>{
{console.log(res.data)}
setState({
...state,
data: {...state.data, res.data}
})
{console.log(state)}
})
}, []) // Empty array brackets means you want only one time your component to do the things mentioned in `useEffect`, Brief [guide][2].

state.data = res.data创建数据的浅拷贝而不是深度拷贝。这里有一篇文章来进一步了解它。

Answer 2

尝试这个

useEffect(()=>{
axios.get('http://localhost:4000/todos').then((res)=>{
{console.log(res.data)}
setState({
...state,
data: res.data,
});
{console.log(state)}
})
})