Estoy tratando de hacer una aplicación de reacción simple que extraiga información de una base de datos MySQL ("nombre de usuario", "saldo", "compras").
Hasta ahora, he usado node y reacciono para extraer de la base de datos con una consulta HTTP y mostrar cada elemento en el sitio web.
Luego creé la consulta API para buscar en la base de datos todas las entradas que comienzan con lo que he escrito en la barra de búsqueda.
El problema al que me estoy enfrentando es ¿cómo cambio el estado de los elementos que muestran el nombre de usuario, etc. con la nueva información filtrada de la consulta API? La barra de búsqueda y los elementos de datos son dos componentes separados, por lo que no puedo usar el gancho de efecto de uso de forma nativa.
No puedo usar el método de filtro porque la base de datos es enorme y he enviado mi límite de consultas a 100.
Aquí está mi código hasta ahora:
PlayerData.js import axios from 'axios'; import React,{useState, useEffect} from 'react'; const Player = () => { const [playerData,setPlayerData]=useState([]) useEffect(()=>{ axios.get("http://localhost:3001/api/get").then((res)=>{ console.log(res.data) setPlayerData(res.data) }) .catch(err=>{ console.log(err); }) },[]) return ( <> {playerData.map((data,id)=>{ return <div className="Player" key={id}> <span className="Username"> { data.name } </span> <span className="Crystals"> { data.balance } </span> <span className="DateModi"> {Object.keys(JSON.parse(data.items)).length} </span> </div> })} </> ) }; export default Player; SearchBar.js import { useState } from "react"; import axios from 'axios' const Search = () => { const [searchTerm, setSearchTerm] = useState("") axios.get(`http://localhost:3001/api/getSearchName/${searchTerm}`).then((res)=>{ console.log(res.data) }) return ( <div className="Search"> <input className = "InputField" type="text" placeholder="Enter Username:" onChange={e => {setSearchTerm(e.target.value)}}/> <span className="SearchButton" onClick={console.log(searchTerm)}> Search </span> </div> ) }; export default Search;Si entendí la pregunta correctamente, debe establecer el estado de PlayerData en un componente compartido ( App ) y pasarlo al componente Player.js . Luego, al buscar, se sobrescribirá y actualizará la información en Player.js
function App() { const [playerData, setPlayerData] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = () => axios .get("http://localhost:3001/api/get") .then((res) => { setPlayerData(res.data); }) .catch((err) => { console.log(err); }); const handleSearch = (text) => { const clearText = text.trim(); if (!clearText.length) { fetchData(); return; } axios .get(`http://localhost:3001/api/getSearchName/${clearText}`) .then((res) => { setPlayerData(res.data); }); }; return ( <div> <div> <Search handleSearch={handleSearch} /> </div> <div> <Player playerData={playerData} /> </div> </div> ); }Buscar.js
const Search = ({ handleSearch }) => { const [searchTerm, setSearchTerm] = useState(""); return ( <div className="Search"> <input className="InputField" type="text" placeholder="Enter Username:" onChange={(e) => { setSearchTerm(e.target.value); }} /> <span className="SearchButton" onClick={() => handleSearch(searchTerm)}> Search </span> </div> ); };jugador.js
const Player = ({ playerData }) => { return ( <> {playerData?.length ? ( playerData.map((data, id) => { return ( <div className="Player" key={id}> <span className="Username"> {data.name} </span> <span className="Crystals"> {data.balance} </span> <span className="DateModi"> {" "} {Object.keys(JSON.parse(data.items)).length}{" "} </span> </div> ); }) ) : ( <div>Loading...</div> )} </> ); };