0
232
VistasReact js: muestra cierto elemento del objeto en la interfaz
Así que configuré una base de datos que se está ejecutando y tiene 31 objetos.
Ahora conecté la base de datos a mi interfaz y la registré allí en la consola, como puede ver aquí:
Ahora digamos que quiero mostrar el texto del objeto con la identificación: 1 allí. Que sería en este caso "Fuente". Debería mostrarse debajo de mi campo h1 que dice "Muéstrame el texto del objeto con id 1".
¿Cómo logro esto?
Aquí está mi código:
Servidor (index.js):
const express = require('express'); const bodyParser = require ('body-parser'); const app = express(); const mysql = require('mysql'); const cors = require('cors'); const db = mysql.createPool({ host: "localhost", user: "root", password:"mypassword", database:'myDatabase', }); app.use(cors()); app.use(express.json()); app.use(bodyParser.urlencoded({extended: true})) app.get('/api/get', (req,res)=>{ const sqlSelect = 'SELECT * FROM myDatabase.signaldb;' db.query(sqlSelect, (err,result)=> { res.send(result); if (err) console.log(err); }) }) app.listen(3001, () => { console.log("running on port 3001") })Interfaz (App.js)
import Axios from 'axios'; import React, {useState, useEffect} from "react"; const App = () => { const [signalList, setsignalList] = useState([]); useEffect(()=> { Axios.get("http://localhost:3001/api/get").then((response) => { //log data console.log("response data: "); console.log(response.data); setsignalList(response.data) }) }); return ( <div> <h1>Show me Text from object with id 1</h1> </div> ); } export default App;3 Respuestas
Responde la pregunta0
Puede usar forEach/map/filter para recorrer la lista de elementos y cuando encuentre el que coincida con la identificación que está buscando, renderícelo.
Solución de filtro:
return ( <div> <h1>{signalList.filter(obj => obj.id == yourId)[0].text}</h1> </div> );El filtro es la solución directa más fácil, pero tal vez si desea hacer algo con los otros elementos que no está representando porque la ID no es la que está buscando, un bucle de mapa sería la solución.
Solución de mapa:
return ( <div> {signalList ? signalList.map(obj => obj.id == yourId ? <h1>{obj.text}</h1>) : DO SOMETHING ELSE} </div> );0
puedes usar la función de mapa
const [signalList, setsignalList] = useState([]); useEffect(()=> { Axios.get("http://localhost:3001/api/get").then((response) => { //log data console.log("response data: "); console.log(response.data); setsignalList(response.data) }) //please add empty array if you want to just execute this function once on mount },[]); return ( <div> <h1>{ signalList.map((e,i)=> e.id==1 ? e.text : '' }</h1> </div> ); }0
Suponiendo que sus identificaciones sean distintas, puede hacer esto. yourId es lo que desea buscar.
return ( <div> <h1>(signalList.filter(obj => obj.id == yourId))[0].text)</h1> </div> );