0

Tengo un problema cuando voy a pasar un array a una tabla de CoreUi, cuando intento poner el array en el lugar del que viene de ejemplo me dice:

Warning: Failed prop type: Invalid prop items of type function supplied to CDataTable, expected array

Pero en este caso entiendo que el formato que me devuelve axios es un array tal cual como el de ejemplo, les muestro el código.

Mi componente clients.js es este:

import React from 'react';
import axios from "axios";

import {
  CBadge,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CDataTable,
  CRow
} from '@coreui/react'

const fetchData = async () => {
  const result = await axios(
    'http://api.devsco.net/',
  );
  // return the result
  return result.data;
};


const getBadge = status => {
  switch (status) {
    case 'Active': return 'success'
    case 'Inactive': return 'secondary'
    case 'Pending': return 'warning'
    case 'Banned': return 'danger'
    default: return 'primary'
  }
}
const fields = ['name','registered', 'role', 'status']

const Tables = () => {
  return (
    <>
      <CRow>
        <CCol>
          <CCard>
            <CCardHeader>
              Combined All Table
            </CCardHeader>
            <CCardBody>
            <CDataTable
              items={fetchData}
              fields={fields} 
              hover
              striped
              bordered
              size="sm"
              itemsPerPage={15}
              pagination
              scopedSlots = {{
                'status':
                  (item)=>(
                    <td>
                      <CBadge color={getBadge(item.status)}>
                        {item.status}
                      </CBadge>
                    </td>
                  )
              }}
            />
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </>
  )
}

export default Tables

El array que CoreUi te da de ejemplo es este:

const fetchData = [
  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
  {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
  {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}

Muchas gracias!

1
  • ¿Podrías agregar el resultado de result después de tu petición con axios? Iba a comentarte que devolvieras result.data en lugar de todo el result pero ya has editado la pregunta por lo que entonces no es el problema. Commented el 1 dic. 2020 a las 16:08

2 respuestas 2

3
items={fetchData}

Aquí estás pasando como prop item la referencia (handle) a la función. Y por eso te da el error.

items={fetchData()}

Aquí estás pasando el resultado de la función, ya que la estás invocando.

De paso te recomiendo implementar (en caso de ser necesario, desconozco del resto de tú código) alguna clase de validación debido a que el llamado es asincrónico y no sé si al inicio (mientras se obtienen los datos) te va a dar error el componente CDataTable porque el prop que vas a pasar no va a ser un array hasta que el pedido finalice.

0

Logre solucionarlo!, dejo por aqui si es que a alguien le sucede lo mismo, estaba poniendo las constantes fuera del componente a exportar, esta seria la soucion"

clients.js

import React from 'react';

import {
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CDataTable,
  CRow,
  //CButton
} from '@coreui/react'

import fetchData from '../clients/ClientsData';


const App = () => {
  const [data, setData] = React.useState([])

  React.useEffect(() => {

   fetchData().then(res => {
     setData(res.data)
   })
  },[])


  //const fields = ['name','registered', 'role', 'status','']

  const fields = [
    { key: 'name', _style: { width: '40%'} },
    'registered',
    { key: 'role', _style: { width: '20%'} },
    { key: 'status', _style: { width: '20%'} },
    {
      key: 'show_details',
      label: '',
      _style: { width: '1%' },
      sorter: false,
      filter: false
    }
  ]

  return (
    <>
    <CRow>
      <CCol>
        <CCard>
          <CCardHeader>
            Clientes
          </CCardHeader>
          <CCardBody>
          <CDataTable
          items={data}
          fields={fields} 
              hover
              striped
              bordered
              size="sm"
              itemsPerPageSelect
              itemsPerPage={2}
              pagination
              tableFilter
              sorter
          />
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </>
  )
}

export default App

clientsData.js


import axios from "axios";

const fetchData = async () => {
  const result = await axios(
    'http://api.com',
  );
  // return the result
  return result;
};

export default fetchData;

Muchas gracias a todos!

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.