在react中，fetch仅在浏览器控制台打开时才起作用

Question

我正在构建一个 React 食品配送应用程序，并且我正在从 swiggy 的公共 api 获取数据： 网址可能因您的情况而异

问题是当我在本地主机上打开它时，在控制台中显示错误：

加载资源失败：服务器响应状态为404()

未捕获（承诺中）语法错误：意外的标记'<', "

但是，当我打开开发人员 chrome 控制台然后刷新页面时，它工作得非常好。 为什么会出现这种情况。

为了从另一个网址获取，我正在使用 cors 插件 ---> 附加信息

const [list, setList] = useState([]);
const [input, setInput] = useState("")
const [filteredAns, setFilteredAns] = useState([]);

const findData = ()=>{
    const filteredVal =  list.filter((res)=>{
            return res.info.name.toLowerCase().includes(input.toLowerCase());     
    })
    setFilteredAns(filteredVal);
}

const setChange = (e)=>{
    setInput(e.target.value);
}


 useEffect(() => {

    const getData = async () => {
        try {
          const data = await fetch("https://www.swiggy.com/mapi/homepage/getCards?lat=18.5203896&lng=73.8567005");
          const json = await data.json();
          const newVal = json?.data?.success?.cards[4]?.gridWidget?.gridElements?.infoWithStyle?.restaurants || [];
          setList(newVal);
          setFilteredAns(newVal);
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      }
      
 
    getData();

 }, [])
 

return(
    <div className="body m-10">
        <div className="filterList flex justify-start space-x-5">
            <div className="search flex justify-between space-x-3">
                <input type="text" className='w-72 h-12 border-2 border-black px-2' placeholder='Enter Restaurant' onChange={(e)=>{setChange(e)}} value={input}/>
                <button className="btn bg-blue-700 p-3 rounded-md text-white" onClick={findData}>Search</button>
            </div>
            <button className="btn bg-purple-600 text-white p-3 rounded-md" onClick={()=>{
                const filteredList = list.filter((item)=>{return item?.info?.avgRating > 4});
                setList(filteredList); 
            }}>Top Rated Restaurants</button>
        </div>
    <div className="flex justify-between items-center flex-wrap">
        {list.length === 0 ? <Shimmer/> :
            filteredAns.map((item)=>{
                return (
                <RestaurantCard data = {item} key={item?.info?.id}/>
                )
            })
        }
        
    </div>
    </div>
)

}

Answer 1

不确定您是否已经解决了这个问题，但您使用的 URL 有 mapi - 它适用于移动设备。 您需要使用桌面 API。