0

Querio mostrar una tabla del pakete andt con los datos que cargo desde mi servidor pero me da este error Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Trate de revisar la documentacion pero no la entiendo bien etoy llamando la tabla dentro de mi componente y no sirve, el problema ocurre al poner en el div

si trato de renderizar otra cosa con los datos de students si sirve ejemplo

{students[0]?.firstName}

(texto adicional para que me deje postear ya creo que mi problema esta bien explicado)

import React, { useState, useEffect } from "react";
import { Table, Avatar, Spin, Modal, Empty, Button, Popconfirm } from "antd";
import axios from "axios";

const TestComponent = () => {
  const [students, setStudents] = useState({});

  useEffect(() => {
    const fetchStudent = async () => {
      try {
        const config = {
          headers: { "Access-Control-Allow-Origin": "*" },
        };
        const studentsFetched = await axios.get(
          "http://localhost:1020/api/students/page/1",
          config
        );
        setStudents(studentsFetched.data);
      } catch (error) {}
    };

    fetchStudent();
  }, []);

  const colums = [
    {
      title: "",
      Key: "avatar",
      render: (text, student) => (
        <Avatar size="large" style={{ backgroundColor: "orange" }}>
          {`${student.firstName.charAt(0).toUpperCase()}${student.lastName
            .charAt(0)
            .toUpperCase()}`}
        </Avatar>
      ),
    },
    {
      title: "studentId",
      dataIndex: "studentId",
      Key: "studentId",
    },
    {
      title: "firstName",
      dataIndex: "firstName",
      Key: "firstName",
    },

    {
      title: "lastName",
      dataIndex: "lastName",
      Key: "lastName",
    },
    {
      title: "email",
      dataIndex: "email",
      Key: "email",
    },

    {
      title: "Gender",
      dataIndex: "gender",
      Key: "gender",
    },
    {
      title: "",
      Key: "buttom",
      render: (student) => (
        <Popconfirm
          title="Are you sure to delete this task?"
          // onConfirm={() => deleteStudent(student.studentId)}
          okText="Yes"
          cancelText="No"
        >
          <a href="#">Delete</a>
        </Popconfirm>
        // <Button
        //   onClick={() => deleteStudent(student.studentId)}
        //   type="delete"
        // >
        //   Delete
        // </Button>
      ),
    },
  ];

  return (
    <div>
      <Table
        style={{ marginBottom: "100px" }}
        dataSource={students}
        columns={colums}
        rowKey="studentId"
        pagination={false}
      />
     
    </div>
  );
};

export default TestComponent;

1 respuesta 1

0

Primero, podría ser que students deba inicializarse como arreglo:

const [students, setStudents] = useState([]);

Luego, yo quitaria la definicion de fetchStudent del useEffect o podrias probar de asignar el valor del fetch a una variable antes de setearla en el estado

const studentsData = studentsFetched.data;
setStudents(studentsData);

Espero que sirva! Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.