页面在本地主机上工作，但不能在firebase或netlifly上工作

Question

我在部署我的react应用程序时遇到了问题，我以前使用过firebase托管，没有遇到任何问题。我使用react制作了一个简单的新闻应用程序，当在本地主机上运行时，该应用程序可以100%正常工作。但当我尝试使用firebase甚至netlifly时，我也会遇到同样的错误。页面在加载时立即崩溃，并返回一个未定义的类型错误r。不确定是什么导致它崩溃，只有在使用主机时，而不是在本地主机上。

function App() {
const [first, setFirst] = useState([]);
const [query, setQuery] = useState("");
const [userNews, setUserNews] = useState([]);
const [show, setShow] = useState(true);
function handleClick(e) {
getNews();
setShow(false);
e.preventDefault();
}
useEffect(() => {
async function news() {
const response = await fetch(
"https://newsapi.org/v2/top-headlines?country=us&apiKey="
);
const newsData = await response.json();
setFirst(newsData.articles);
}
news();
}, []);
async function getNews() {
const answer = await fetch(
"https://newsapi.org/v2/everything?q=" +
query +
"&from=2022-03-01&sortBy=popularity&language=en&apiKey="
);
const data = await answer.json();
setUserNews(data.articles);
//console.log(data)
}
function createCard(first, n) {
return (
<Article
key={n}
title={first.title}
author={first.author}
time={first.publishedAt}
content={first.description}
link={first.url}
photo={first.urlToImage}
/>
);
}
function createUserCard(userNews, i) {
return (
<UserArticle
key={i}
title={userNews.title}
author={userNews.author}
time={userNews.publishedAt}
content={userNews.description}
link={userNews.url}
photo={userNews.urlToImage}
/>
);
}
return (
<div>
<Header />
<form onSubmit={handleClick} className="input">
<input
type="text"
placeholder="Search."
onChange={(e) => setQuery(e.target.value)}
/>
<button>search.</button>
</form>
{show && <div className="container">{first.map(createCard)}</div>}
<div className="container">{userNews.map(createUserCard)}</div>
<Footer />
</div>
);
}

Answer 1

如果不看到错误实时发生，我无法确定，但它似乎试图访问某个属性，但未定义。r可能是您命名的对象的别名，但在生产中被代码的webpacker缩小版重命名。

我的猜测是，您的api调用收到了一个糟糕的结果，但您没有正确处理来自api的意外结果。如果api查询的结果不是您期望的对象，那么您将不会收到要调用的articles属性，因此会出现错误。考虑使用trycatch来保护自己：

async function getNews(){
try {
const answer = await fetch('https://newsapi.org/v2/everything?q='+ query +'&from=2022-03-01&sortBy=popularity&language=en&apiKey=')
const data = await answer.json();
setUserNews(data.articles)
} catch(error) {
console.log(error)
}
}

这将在获取错误响应时保护您，并且您的页面不会崩溃。

在生产环境中，特别是如果后端由firebase等第三方提供商管理，可能会导致cors问题，并且可能无法获得与在localhost上相同的结果。

在getNews和news函数上都使用trycatch(或者在任何进行外部api调用的地方，这都是一种很好的做法(，这样您就可以查看该api调用是否出错。使用带有error对象的catch块中的console.log。这将立即显示您是否对获取请求有问题。否则，代码看起来很好，从表面上看没有任何问题。