Estoy tratando de crear una barra de búsqueda en reaccionar que busque a través de la API de TMDB, pero tengo algunos problemas. Cada vez que escribo en la barra de búsqueda, aparece un error que dice que Cannot read properties of null (reading 'value') y no estoy seguro de cuál podría ser el problema y por qué regresa como nulo. Llamo a la mención en
function Search() { const [searchQuery, setSearchQuery] = useState(""); const [timeoutId, updateTimeoutId] = useState(); const fetchData = async (searchString) => { const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`); console.log(response); }; const onTextChange = (e) => { clearTimeout(timeoutId); setSearchQuery(e.target.value); const timeout = setTimeout(() => fetchData(e.target.value), 500); updateTimeoutId(timeout); }; return( <div> <SearchBox> <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput> </SearchBox></div> ); }Este es el código de entrada de búsqueda
const SearchInput = styled.input` color: black; font-size: 16px; font-weight: bold; border: none; outline: none; margin-left: 15px; `;Podrías probar con el encadenamiento opcional ( ?. )
function Search() { const [searchQuery, setSearchQuery] = useState(""); const [timeoutId, updateTimeoutId] = useState(); const fetchData = async (searchString) => { const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`); console.log(response); }; const onTextChange = (e) => { clearTimeout(timeoutId); setSearchQuery(e.target?.value); const timeout = setTimeout(() => fetchData(e.target?.value), 500); updateTimeoutId(timeout); }; return( <div> <SearchBox> <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput> </SearchBox></div> ); }e.target.value ya no existe una vez que el tiempo de espera ha vuelto desde la API web. La función ha terminado su ejecución y el argumento e ya no existirá.
En su lugar, pruebe useRef en lugar de e.target.value en su función de devolución de llamada setTimeout , de modo que cuando regrese, pueda hacer referencia a los últimos cambios.
Algo como esto:
function Search() { const [searchQuery, setSearchQuery] = useState(""); const [timeoutId, updateTimeoutId] = useState(); const query = useRef(searchQuery); const fetchData = async (searchString) => { const response = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=f134dfeac1ebb17feefa58d7f94e94cd&language=en-US&query=${searchString}&page=1&include_adult=false`); console.log(response); }; const onTextChange = (e) => { clearTimeout(timeoutId); setSearchQuery(e.target.value); query.current = e.target.value; const timeout = setTimeout(() => fetchData(query.current), 500); updateTimeoutId(timeout); }; return( <div> <SearchBox> <SearchInput placeholder="SEARCH" value={searchQuery} onChange={onTextChange}></SearchInput> </SearchBox></div> );Después de echar otro vistazo a su código, sospecho que es el segundo acceso al evento en la devolución de llamada de tiempo de espera que desde entonces ha sido anulado. Debe guardar una referencia al valor del evento dentro del alcance de devolución de llamada para que no haya una dependencia en el objeto de evento persistente.
const onTextChange = (e) => { const { value } = e.target; clearTimeout(timeoutId); setSearchQuery(value); const timeout = setTimeout(() => fetchData(value), 500); updateTimeoutId(timeout); }; Además, para su información, a menos que necesite el timeoutId como parte del estado para activar una nueva representación o algo así, es más común usar una referencia React aquí para almacenar una referencia a la identificación del temporizador. Por lo que puedo decir, simplemente está acelerando la llamada de fetchData y no hay necesidad de activar renderizaciones innecesarias.
Ejemplo:
const timeoutIdRef = useRef(); useEffect(() => { // clear any running timeouts upon component unmount return () => clearTimeout(timeoutIdRef.current); }, []); ... const onTextChange = (e) => { const { value } = e.target; clearTimeout(timeoutIdRef.current); setSearchQuery(value); timeoutIdRef.current = setTimeout(() => fetchData(value), 500); };