在反应应用程序中部署后我无法获取数据答案

【问题标题】：i cant fetch data after deployment in react app在反应应用程序中部署后我无法获取数据
【发布时间】：2022-01-16 02:37:22
【问题描述】：

该应用程序可以在本地完美运行。我使用 firebase 托管部署它后出现错误。下面的代码是我从 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 ProductList

已部署应用的控制台上出现错误消息：

ProductList.js:21 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')

【问题讨论】：

标签： javascript reactjs deployment axios firebase-hosting

【解决方案1】：

   if(response.data.Search){
       dispatch(setProducts(response.data.Search));
   }

尝试先检查您的回复。我认为您可能必须在这里证明 catch 错误。在response.data.Search未定义的情况下添加else语句或使用response?.data.Search

【讨论】：

【解决方案2】：

大多数浏览器都会阻止来自安全站点 (https) 的不安全请求 (http)。

将http://www.omdbapi.com/ 更改为https://www.omdbapi.com/

【讨论】：