Reactjs React Hooks/Typescript:"；TypeError:blogs.map不是一个函数；（和I'；ve type'；d blog作为'；数组'；）

几个月前，我构建了一个博客web应用程序。当时它工作正常，但现在重新访问时，博客将不会加载GET-fetch请求。我在Postman中遇到“内部服务器错误”，在控制台中遇到“UncaughtTypeError:blogs.map不是函数”

我已经更新了npm及其依赖项，并在代码编辑器中解决了所有标记为红色的错误

我在SO和internet上搜索过，似乎我能找到的唯一解决方案是“当需要将获取的数据键入“数组”时，将其键入“字符串”——但我键入的是正确的

我的代码：

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;

路线

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);
}

从“同构提取”导入提取；
导出let AccessToken:string=localStorage.getItem（'token'）| | null；
导出let用户：任意={
userid:localStorage.getItem（'userid'）| | null，
角色：localStorage.getItem（'role'）| | null
}
export const json=async（uri:string，method:string='GET'，body？：{}）=>{
let headers:any={
“内容类型”：“应用程序/json”
};
if（AccessToken）{
头文件['Authorization']='Bearer${AccessToken}`；
}
试一试{
让结果=等待获取（uri{
方法,，
标题，
body:JSON.stringify（body）
});
if（result.ok）{
返回（wait result.json（））；
}否则{
返回false；
}
}捕获（错误）{
console.log（错误）；
投掷误差；
}
};
export const SetAccessToken=（标记：字符串，用户：{}={userid:未定义，角色：'guest'}）=>{
AccessToken=令牌；
用户=用户；
setItem（'token'，token）；
localStorage.setItem（'userid'，User.userid）；
localStorage.setItem（'role'，User.role）；
}

---

我尝试在前端和后端都修改一些代码，因为错误似乎影响了这两个方面？但仍然有点不知所措。非常感谢您的帮助！

好的，根据您的其他信息，下面是发生的情况

来自react应用程序的请求失败。服务器正在以以下方式响应：

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（）；

正在抛出一个错误，将其记录到控制台，然后返回HTTP 500状态

然后在发出请求的代码中，有以下逻辑：

    if (result.ok) {
        return <T>(await result.json());
    } else {
        return false;
    }

你真的这么做了，这不是你想要的

setBlogs(false);

我无法告诉您如何修复此问题，但此信息应该有助于您进行调试。我将首先在您的命令行终端中查找登录的任何错误。可能您的服务器由于某种原因无法连接数据库？或者完全其他原因

---

祝你好运！

我猜

等待json（“/api/blogs”）；

正在返回

null

。你能发布

json

方法吗？@AlexWayne，对不起，我不熟悉它是什么（我在训练营期间创建了这个博客，所以我不理解其中的每一点代码）。但是，我已经在我的帖子中添加了我认为您要求的内容；它是“api.ts”部分。在

let blogs=wait json（“/api/blogs”）；

下添加

console.log（blogs）

。您得到了什么？同时检查浏览器调试器的网络选项卡。请求是否成功？使用

console.log（blogs）

我刚刚收到了相同的错误。在我的终端中，我看到请求的状态为500。在“网络”选项卡中，除get请求外，所有请求都成功。我应该注意，最初加载整个页面，但一旦get请求触发，所有内容都将变为空白（背景图像除外）。除了^I get“ECONREFUNCED”“错误，但我不确定这是否重要？谢谢，亚历克斯！你的解释帮助我更好地理解了错误，我实际上刚刚开始调查我的数据库，看看这是否是问题所在，所以我同意这可能是问题所在。

setBlogs(blogs);

setBlogs(false);