[英]I deployed my React App but the API is not working
I made a really simple react app, where I just have a search bar and it shows every movie through an API I got from omdbapi.com .I think its a WEB Api since I'm getting it from a JSON File on a web.I deployed it but the movies are not showing.They are showing in my local host though.App structure, code everything is the same as when you first create an app except app.js ofc.Npm build does not work, installing Node on the domain does not work, unless there is a method I have not tried,I'm searching all over the web but I can't find a solution or I just do not know how to search.我做了一个非常简单的反应应用程序,我只有一个搜索栏,它通过我从 omdbapi.com 获得的 API 显示每部电影。我认为它是一个 WEB Api,因为我是从网络上的 JSON 文件中获取它的。我部署了它,但电影没有显示。尽管它们显示在我的本地主机中。应用程序结构,代码一切都与您第一次创建应用程序时相同,除了 app.js ofc.Npm 构建不起作用,在域不起作用,除非有我没有尝试过的方法,我在网上搜索但我找不到解决方案,或者我只是不知道如何搜索。
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;
how exactly are you deploying it?你究竟是如何部署它的? if you used create-react-app
then you could just run npm run build
then upload the contents of the build
folder to your server如果您使用create-react-app
那么您可以运行npm run build
然后将build
文件夹的内容上传到您的服务器
I am very interested about the:我对以下内容非常感兴趣:
Npm build does not work Npm 构建不起作用
Can you share a little bit more about the errors you are getting.您能否分享更多有关您遇到的错误的信息。
If you are really stuck use the good'ol console.log
everywhere method, especially on the fetch request and the response of it.如果你真的被卡住了,请使用 good'ol console.log
无处不在的方法,尤其是在获取请求和它的响应上。
Please carefully review the wording of your question and rewrite it where appropriate.请仔细检查问题的措辞并在适当的地方重写。 Much of it is illegible.其中大部分内容难以辨认。
Above this line - setMovies(data.Search);
在这条线之上 - setMovies(data.Search);
add a console.log(data.Search);
添加一个console.log(data.Search);
. . Are the items you're expecting actually appearing here?您期望的项目是否真的出现在这里?
Finally, never have I added async code outside of a useEffect
.最后,我从来没有在useEffect
之外添加异步代码。 I suppose the way you've done it would work but why not just include the code inside?我想你这样做的方式会起作用,但为什么不直接在里面包含代码呢?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.