¿Cómo es posible usar una variable en la que estamos almacenando datos de mongoDB, en otro componente de reacción donde podemos usar los datos que se obtienen de mongoDB y se almacenan en esa variable?
Código para el archivo en el que se obtienen datos de mongoDB y se almacenan en una variable llamada datos
import React,{useEffect,useState} from 'react' import './HeroSection.css' import axios from 'axios' import {useHistory} from 'react-router-dom'; function Homefilter() { const [search, setSearch] = useState(''); const history = useHistory(); const [data,setData] = useState('') const Getsearch = () =>{ console.log(search) axios.get('/searchdata',{params: {search}}) .then(response => { setData(response.data.data) console.log(response); history.push('/searchdata') }) .catch(error => { console.log(error); }); } // useEffect(() => { // Getsearch(); // }, []); return ( <div class='container-fluid'> <div style={{height:'350px',alignItems:'center'}} class="row" id='colu' > <div class='col-lg-12 col-md-12 col-sm-12'> <div style={{justifyContent:'center',alignContent:'center',alignItems:'center',textAlign:'center'}} > <input style={{display:'inline',width:'35rem'}} type="text" name="search" class="form-control" placeholder="Enter keyword to search Vehicle" value={search} onChange={(e)=>setSearch(e.target.value)} /> <button onClick={Getsearch} class="btn btn-primary">Search</button> </div> </div> </div> </div> ) } export default HomefilterAhora quiero usar esta variable de datos en otro componente de reacción para poder mostrar los datos almacenados en la variable de datos
Puede pasar datos al componente al que está navegando de las siguientes maneras:
A través de parámetros de consulta: puede pasar parámetros de consulta al navegar a otro componente como este:
history.push({ /searchdata?**yourdatavariable=**${yourdatavalue} })
y obtenga este parámetro de consulta en el componente navegado usando useParams() de react-router de esta manera:
const { yourdatavariable } = useParams();Establece el objeto de estado en la función de inserción de useHistory() de esta manera:
this.props.router.push({ pathname: '/other-page', state: { id: 7, color: 'green' } })y recuperándolo en el componente navegado de esta manera:
props.location.state.id or props.location.state.colorEste es un ejemplo de: Stackoverflow