无法通过使用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）我不知道，是什么原因导致错误，无论是异步性质还是使用钩子

Answer 1

尝试一下

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