La aplicación funciona perfectamente localmente. El error aparece después de que lo implemento usando el alojamiento de firebase. El siguiente código es el componente donde obtengo los datos del recurso API
import React, { useEffect, useState } from 'react' import{ useSelector, useDispatch} from "react-redux" import { setProducts } from "../containers/redux/actions/productActions" import ProductComponent from './ProductComponent'; import axios from 'axios'; function ProductList() { const products = useSelector((state) => state); const dispatch = useDispatch() const [searchValue, setSearchValue] = useState(''); const fetchProducts = async ( searchValue) => { const response = await axios .get(`http://www.omdbapi.com/?s=${searchValue}&apikey=??????`) .catch((err) => { console.log("Err", err); }); if(response.data.Search){ dispatch(setProducts(response.data.Search)); } }; useEffect(() => { fetchProducts(searchValue); // eslint-disable-next-line react-hooks/exhaustive-deps },[searchValue]); console.log("Products: " , products) return ( <div className='home'> <div className='search-box'> <input value={searchValue} onChange={(e) => setSearchValue(e.target.value)} type="text" placeholder="Search.." > </input> </div> <div className='products-list'> <ProductComponent /> </div> </div> ) } export default ProductListAparece un mensaje de error en la consola de la aplicación implementada:
ProductList.js: 21 No capturado (en promesa) TypeError: no se pueden leer las propiedades de undefined (leyendo 'datos')
if(response.data.Search){ dispatch(setProducts(response.data.Search)); }
Trate de verificar su respuesta primero. Creo que es posible que deba probar el error de captura aquí. Agregar declaración else en caso de que response.data.Search no esté definido o use response?.data.Search
La mayoría de los navegadores bloquearán las solicitudes no seguras (http) realizadas desde sitios seguros (https).
Cambie http://www.omdbapi.com/ a https://www.omdbapi.com/