reactjs 我部署了我的React应用程序,但API不起作用

pw136qt2  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(110)

我用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;
qvtsj1bj

qvtsj1bj1#

const API_URL = 'http://www.omdbapi.com?apikey=***'
错误是不安全的HTTP请求使它'https://www.omdbapi.com?apikey=
***'

相关问题