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

Posted 2023-02-23

【中文标题】无法使用 MaterialTable 中的 useEffect 挂钩显示数据

【英文标题】：Unable to display the data by using useEffect hook inside MaterialTable

【发布时间】：2020-06-27 06:52:12

【问题描述】：

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()工作

【问题讨论】：

console.log(res.data)这一行打印的是什么？

Array(7) 0: _id: "5e6768a42c21f17e9da41e72", todo: "hello mdvenkatesh", description: "you are great", __v: 0 1: _id: "5e67690272c1388a58925030", todo ：“你好 mdvenkatesh”，描述：“你很棒”，__v：0 2：_id：“5e676cba12e090b87466a872”，待办事项：“你好 mdvenkatesh”，描述：“你很棒”，__v：0 3：_id ：“5e676d5564b8d61eb98bf78b”，待办事项：“你好 mdvenkatesh”，描述：“你很棒”，__v：0 5：_id：“5e676f1fd2368fe5c42ec25a”，待办事项：“你好 mdvenkatesh”，描述：“你很棒”，__v： 0 长度：5

【参考方案1】：

试试这个

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

【讨论】：

我看不到数据，但里面的行数不等于数据的长度，而且每次调用 api 时都会出现性能问题

【参考方案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 以进一步了解它。

【讨论】：

谢谢，字段名称应与后端的键值匹配，但我的页面不断向 api 发送请求，如何使其作为 componentdid mount 工作

我得到了“。” （逗号）来自数据的预期错误：...state.data, res.data 错误指向点“。”