无法使用 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

试试这个

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

Answer 2

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 创建数据的浅拷贝而不是深拷贝。这是一个article 以进一步了解它。