Tengo un componente de barra de navbar en el que hay una barra de búsqueda de entrada. Actualmente estoy tomando el valor de la barra de búsqueda y navego al componente Results y accedo al valor de entrada useParams .
Tengo let [ result, setResult ] = useState([]); en mi componente Results porque los resultados pueden cambiar después de ingresar la búsqueda con botones en la página. El problema es que no puedo establecer el resultado inicial mientras useState porque lo estoy obteniendo de una API.
Entonces, cada vez que renderizo, primero obtengo una matriz vacía y una promesa fallida, después de lo cual obtengo la deseada. ¿Cómo arreglar esto? Necesito que la barra de búsqueda esté en la barra de navegación.
Este es el código. Nuevo en Reaccionar.
const Navbar = () => { let navigate = useNavigate(); const handleKeyDown = (event) => { if (event.key === 'Enter') { let value = event.target.value; navigate(`/results/${value}`); } } return ( <nav className='navigation'> <div className='left-slot'> <button>runtime</button> </div> <div className="middle-slot"> <input className="after" placeholder="get runtimes" onKeyDown={handleKeyDown}> </input> </div> <div className='right-slot'> <button>How It Works</button> <button>Coming Soon</button> </div> </nav> ); } const Results = () => { let { value } = useParams(); let [ result, setResult ] = useState(); useEffect(() => { fetchArrayByPage(value, page, option).then(res => setResult(res)) }, [value]) console.log(value); console.log(result); return (<div></div>) }pruebe una función de ajuste para buscar y configurar. Yo sugeriría algo como esto:
async function handleResults(){ const res = await fetchArrayByPage(value, page, option) setResult(res) }entonces puedes llamarlo dentro de useEffect
No estoy completamente seguro de por qué su código no funciona, así que le daré tres opciones.
Opción 1 : si su problema es que el value no está definido.
Cambie su useEffect en Results a esto:
useEffect(() => { fetchArrayByPage(value && value.length ? value : '', page, option).then(res => setResult(res)) }, [value]); Opción 2 : si necesita pasar accesorios, la barra de Navbar y los Results no están en rutas separadas.
Simplemente pase el value como accesorios de Navbar a Results .
Opción 3 - Paso de componentes sin apoyos.
Utilice la API de contexto . Esto le permite compartir datos entre componentes sin necesidad de pasar accesorios manualmente de padre a hijo.
import React, { createContext } from 'react'; const NavbarContext = createContext(null); export default NavbarContext;App.js o App.tsx si está usando Typescript. const [value, setValue] = useState(''); ... const variables = { value, setValue, ..., };variables . return ( <NavbarContext.Provider value={variables}> ... </NavbarContext.Provider> );Navbar y Results . const { value, setValue, ... } = useContext(NavbarContext);