Estoy creando una aplicación React Movie que permite al usuario buscar películas y agregarlas a su lista de favoritos. Esta aplicación tendrá una función de búsqueda en vivo con una función de carga infinita, de modo que cuando el usuario ingrese el nombre de un título, un modal mostrará los resultados y el usuario puede seleccionar los títulos que se agregarán a su lista.
Estoy tan confundido acerca de administrar la búsqueda en vivo y el estado de carga infinito y su dependencia. Entonces, ¿este enfoque es correcto o los resultados de la búsqueda deberían ser parte del componente de búsqueda en vivo?
const App = () => { const [searchResults, setSearchResults] = useState([]); const [reqQuery, setReqQuery] = useState(""); useEffect(() => { // Request from API and store in the searchResults }, [reqQuery]); useEffect(() => { // Render Results }, [searchResults]); return ( <> <SearchForm onConfirmedInput={(query) => setReqQuery(query)} /> {searchResults && <Results data={searchResults} />} </> ); }; const SearchForm = (props) => { const [value, setValue] = useState(""); const handleChange = (e) => { const val = e.target.value; setValue(val); // If value is valid then lift-up props.onConfirmedInput(value); }; return <input value={value} onChange={handleChange}></input>; };PD: el código mencionado es solo para elaborar el problema y no es parte del código de la aplicación real
El enfoque es el estado de almacenamiento de sonido en un nivel más alto y tener SearchForm como un componente que simplemente usa sus props pasados. algunos consejos
<Movies> . Su <App> debe conservarse para cosas como el enrutamiento y no preocuparse por los detalles de implementación de partes específicas de la funcionalidad. Me doy cuenta de que puede haber estado tratando de mantener las cosas simples y su ejemplo ordenado, lo mencioné por si acaso.useEffect funcionará, sin embargo, no es la mejor práctica. Debe declarar funciones (p. ej. getSearchResults ) para las llamadas a la API (y, lo que es más ideal, declararlas en un servicio separado, en lugar de fetch en el código del componente) y pasarlas a su SearchForm en lugar de depender de useEffect . Cuando el estado cambia (por ejemplo, después de que se llama a la API y se devuelven los resultados), el componente se volverá a representar después setSearchResults(results) y pasarlos a <SearchForm> Para un desplazamiento infinito con carga diferida, recomiendo encarecidamente la excelente biblioteca react-window y los componentes asociados para la carga de lzay y el cambio de tamaño automático.