Невозможно отобразить данные с помощью хука useEffect внутри MaterialTable - PullRequest
Новая
       3

Невозможно отобразить данные с помощью хука useEffect внутри MaterialTable

0 голосов
/ 16 марта 2020 
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) я не знаю, что является причиной ошибки асин c характер или использование ловушки

5) моя страница постоянно отправляет запрос в API, как заставить его работать как компонентdid mount ()

Ответы [ 2 ]

1 голос
/ 16 марта 2020
Атрибут (ключ)

field в columns prop должен соответствовать атрибутам (ключам) в реквизитах 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 создает неглубокую копию данных, а не глубокую копию. Вот статья , чтобы понять это далее.

0 голосов
/ 16 марта 2020

попробуйте 

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