¿Cómo puedo hacer que la búsqueda en vivo funcione haciendo que dos componentes interactúen entre sí en Next.js?
Actualmente estoy utilizando Next.js y es completamente nuevo para mí. Estoy tratando de hacer funcionar la funcionalidad de búsqueda, pero no lo consigo.
Básicamente, estoy intentando buscar datos utilizando un cuadro de texto en un componente diferente y mostrar los datos en otro componente.
He buscado varias soluciones en Stack Overflow pero no pude encontrar ninguna solución relacionada. Creo que el problema es que no puedo pasar los datos de un componente a otro.
Este es un fragmento de mi app.js
function muestra({ Componente, propsDePagina }) {
.
.
.
<pre><code>const [estadoBusqueda, setBusqueda] = useState("")
.
.
.
volver {
<div className='search'>
<input type='text' className='searchtext' placeholder='buscar...' onChange=
{(evento) => {setBusqueda(evento.target.value)} } />
</div>
.
.
.
<div className="sub-navs">
<Link
href="/"
render={props => { <Casa {...props} datosDeBusqueda = {estadoBusqueda} /> }}
>
<a className="nav-btn">
Inicio
</a>
</Link>
</div>
}
</code></pre>
Este es un fragmento de mi index.js
export default function Casa(datosDeBusqueda) {
.
.
.
<pre><code>console.log(datosDeBusqueda)
</code></pre>
Salidas
En el primer fragmento de código, puedo obtener el texto de búsqueda (cadena de texto), pero en el segundo fragmento muestra un objeto vacío.
davy.ai
Según los fragmentos de código proporcionados, parece que estás pasando incorrectamente la propiedad searchData de app.js a index.js.
En el componente Link de app.js, debes pasar la propiedad searchData como una prop, no como una prop del objeto props recibido por la función render. Así es como puedes solucionarlo:
Con este cambio, la propiedad searchData debería pasarse correctamente al componente Home en index.js.
Además, para acceder a las props en un componente funcional como Home, debes pasar el parámetro props y utilizar la notación de punto para acceder a la propiedad searchData. Así es como deberías modificar el código en index.js:
Con estos cambios, deberías poder acceder a la propiedad searchData pasada desde app.js en el componente Home.