我用API做了一个非常简单的应用程序。在LocalHost上,一切都运行得很好,但当我部署它时,电影不会显示。当使用npm run build或部署API时,是否可能没有覆盖?该应用程序只包含一个搜索栏和一个容器,在搜索后会弹出电影。
import { useState , useEffect } from 'react';
import MovieCard from './MovieCard';
import './App.css';
import SearchIcon from './search.svg'
const API_URL = 'http://www.omdbapi.com?apikey=********'
const App = () => {
const [movies, setMovies] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
searchMovies('batman')
}, []);
const searchMovies = async (title) => {
const response = await fetch(`${API_URL}&s=${title}`);
const data = await response.json();
setMovies(data.Search);
};
return (
<div className='app'>
<h1>MovieLand</h1>
<div className='search'>
<input
placeholder='Search for moves'
value={searchTerm}
onChange={(e)=> setSearchTerm(e.target.value)}
/>
<img
src={SearchIcon}
alt='search'
onClick={()=> searchMovies(searchTerm)}
/>
</div>
{movies?.length > 0
? (
<div className='container'>
{movies.map((movie) => (
<MovieCard movie={movie}/>
))}
</div>
) : (
<div className='empty'>
<h2>No movies Found</h2>
</div>
)}
</div>
);
}
export default App;
1条答案
按热度按时间qvtsj1bj1#
const API_URL = 'http://www.omdbapi.com?apikey=***'
错误是不安全的HTTP请求使它'https://www.omdbapi.com?apikey=***'