Estoy tratando de representar una matriz de datos en la interfaz de usuario. Hasta ahora, he podido consolar. registrar la matriz, pero no he podido mostrarla en una tabla.
Actualmente estoy usando Axios para recuperar los datos del back-end y estoy tratando de representar los datos en Bootstrap Table. Mi problema inicial fue que necesitaba asignar a cada niño de la lista un apoyo clave único. Ahora que desapareció este error, todavía no puedo ver los datos en la interfaz de usuario.
Componente de mesa de invitación (InviteTable.js):
import React, { useState, useEffect } from 'react'; import Axios from 'axios'; import BootstrapTable from 'react-bootstrap-table-next'; import PaginationFactory from 'react-bootstrap-table2-paginator'; import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit'; import Spinner from 'react-bootstrap/Spinner'; const InviteTable = () => { const [invites, setInvites] = useState([]); const [loading, setLoading] = useState(false); const { SearchBar } = Search; const url = "http://localhost:5000/api/get"; //Define columns const columns = [ { dataField: "Id", text: "Id", headerStyle: () => {return { width: "10%" };} }, { dataField: "Code", text: "Invite Code", headerStyle: () => {return { width: "10%" };} }, { dataField: "Recipient", text: "Recipient Email", headerStyle: () => {return { width: "35%" };} }, { dataField: "Created", text: "Date Sent", headerStyle: () => {return { width: "35%" };} }, ]; //GET and set data useEffect(() => { Axios.get(url).then(result => { setInvites(result.data); console.log(result.data); setLoading(true); }) .catch(function(error) { console.log(error); }); }, []); return ( <div> {loading ? ( <ToolkitProvider keyField="Id" data={invites} columns={columns} search> {(props) => ( <div> <SearchBar {...props.searchProps} /> <BootstrapTable {...props.baseProps} pagination={PaginationFactory()} /> </div> )} </ToolkitProvider> ) : ( <Spinner animation="border" /> )} </div> ) }; export { InviteTable }Consola: Salida de console.log
He resuelto este problema. El problema residía en el archivo del servidor que ejecutaba la consulta para devolver las invitaciones.
Soy bastante nuevo en esto, así que todavía estoy en el proceso de aprender sobre la marcha.
Inicialmente, estaba enviando el resultado completo al front-end, lo que estaba causando problemas:
request.query('select * from Invites;', (err, result) => { // console log error if there is one if (err) console.log(err); // send records as a response res.send(result); });Para resolver esto, especifiqué que el conjunto de registros debe enviarse al front-end:
request.query('select * from Invites;', (err, result) => { // console log error if there is one if (err) console.log(err); // send records as a response res.send(result.recordset); });Aquí está la solución, primero verifique sus datos si están en el objeto y luego conviértalos en una matriz. y asegúrese de que el nombre del campo de datos de sus columnas sea el mismo que el de los parámetros de su base de datos
const [post, setPost] = useState([]); then(response => { const data = response.data; const arr = Object.entries(data); //convert object into array arr.forEach(([key, value]) => { setPost(oldArray => [...oldArray, value]); // Assign Data toTable }); }) <BootstrapTable keyField='id' data={post} columns={columns} pagination={paginationFactory()}/>