几个月前我建立了一个博客网络应用程序。它当时工作正常,但现在重新访问它时,博客将不会加载一个GET获取请求。在Postman和控制台中,我得到了“内部服务器错误”和"Uncaught : blogs.map不是函数“。
我更新了npm及其依赖项,并解决了代码编辑器中以红色标记的所有错误。
我已经在互联网上搜索过了,这似乎是我唯一能找到的解决方案,就是“当你需要将获取的数据键入一个‘数组’时,你把它作为‘字符串’输入--但我已经正确地输入了我的数据。”
我的代码:
Home.tsx
import * as React from "react";
import { useState, useEffect } from "react";
import { IBlog } from "../utils/interfaces";
import BlogPreview from "../components/BlogPreview";
import { json } from "../utils/api";
export interface HomeProps {}
const Home: React.SFC<HomeProps> = () => {
const [blogs, setBlogs] = useState<IBlog[]>([]);
useEffect(() => {
(async () => {
try {
let blogs = await json("/api/blogs");
setBlogs(blogs);
} catch (error) {
console.log(error);
}
})();
}, []);
return (
<>
<div>
<h2 className="row m-4 justify-content-center text-secondary">
Blog Feed
</h2>
</div>
<main className="col">
<section className="row my-5 justify-content-center">
{blogs.map(blog => {
return <BlogPreview key={`blog-${blog.id}`} blog={blog} />;
})}
</section>
</main>
</>
);
};
export default Home;interfaces.ts
export interface IBlog {
id: number,
title: string,
content: string,
_created: Date,
name: string
}routes.ts
import { Router, Request } from "express";
import db from "../../db";
router.get("/", async (req, res, next) => {
try {
let blogs = await db.Blogs.getAll();
res.json(blogs);
} catch (error) {
console.log(error);
res.sendStatus(500);
}
});
export default router;api.ts
import fetch from 'isomorphic-fetch';
export let AccessToken: string = localStorage.getItem('token') || null;
export let User: any = {
userid: localStorage.getItem('userid') || null,
role: localStorage.getItem('role') || null
}
export const json = async <T = any>(uri: string, method: string = 'GET', body?: {}) => {
let headers: any = {
'Content-type': 'application/json'
};
if (AccessToken) {
headers['Authorization'] = `Bearer ${AccessToken}`;
}
try {
let result = await fetch(uri, {
method,
headers,
body: JSON.stringify(body)
});
if (result.ok) {
return <T>(await result.json());
} else {
return false;
}
} catch (error) {
console.log(error);
throw error;
}
};
export const SetAccessToken = (token: string, user: {} = { userid: undefined, role: 'guest'}) => {
AccessToken = token;
User = user;
localStorage.setItem('token', token);
localStorage.setItem('userid', User.userid);
localStorage.setItem('role', User.role);
}我尝试过在前端和后端修改一些代码,因为错误似乎同时影响了两者?不过还是有点不知所措。非常感谢你的帮助!
发布于 2020-07-15 20:55:32
好的,根据你的附加信息,这里是发生了什么。
您的要求从您的反应应用程序是失败的。服务器的响应是:
HTTP 500内部服务器错误
如果我们查看您的路由,我们可以看到500错误来自何处:
router.get("/", async (req, res, next) => {
try {
let blogs = await db.Blogs.getAll();
res.json(blogs);
} catch (error) {
console.log(error);
res.sendStatus(500);
}
});这意味着db.Blogs.getAll();抛出一个错误,将其记录到控制台,然后返回HTTP500状态。
然后,在发出请求的代码中,有这样的逻辑:
if (result.ok) {
return <T>(await result.json());
} else {
return false;
}请求的结果不确定,这是服务器错误。因此,false被返回。这意味着await json("/api/blogs");返回false。这意味着当你这样做:
setBlogs(blogs);你真的在这样做,这不是你想要的。
setBlogs(false);我不能告诉您如何解决这个问题,但是这个信息应该可以帮助您调试它。首先,我将查看您的命令行终端中是否有任何错误正在注销。也许您的服务器由于某种原因无法连接数据库?或者完全是别的东西。
祝好运!
https://stackoverflow.com/questions/62923250
复制相似问题