首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React /Typescript:"TypeError: blogs.map不是一个函数“(我已经将博客输入为一个‘数组’)

React /Typescript:"TypeError: blogs.map不是一个函数“(我已经将博客输入为一个‘数组’)
EN

Stack Overflow用户
提问于 2020-07-15 20:27:23
回答 1查看 435关注 0票数 0

几个月前我建立了一个博客网络应用程序。它当时工作正常,但现在重新访问它时,博客将不会加载一个GET获取请求。在Postman和控制台中,我得到了“内部服务器错误”和"Uncaught : blogs.map不是函数“。

我更新了npm及其依赖项,并解决了代码编辑器中以红色标记的所有错误。

我已经在互联网上搜索过了,这似乎是我唯一能找到的解决方案,就是“当你需要将获取的数据键入一个‘数组’时,你把它作为‘字符串’输入--但我已经正确地输入了我的数据。”

我的代码:

Home.tsx

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
export interface IBlog {
    id: number,
    title: string,
    content: string,
    _created: Date,
    name: string
}

routes.ts

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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);
}

我尝试过在前端和后端修改一些代码,因为错误似乎同时影响了两者?不过还是有点不知所措。非常感谢你的帮助!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-15 20:55:32

好的,根据你的附加信息,这里是发生了什么。

您的要求从您的反应应用程序是失败的。服务器的响应是:

HTTP 500内部服务器错误

如果我们查看您的路由,我们可以看到500错误来自何处:

代码语言:javascript
运行
复制
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状态。

然后,在发出请求的代码中,有这样的逻辑:

代码语言:javascript
运行
复制
    if (result.ok) {
        return <T>(await result.json());
    } else {
        return false;
    }

请求的结果不确定,这是服务器错误。因此,false被返回。这意味着await json("/api/blogs");返回false。这意味着当你这样做:

代码语言:javascript
运行
复制
setBlogs(blogs);

你真的在这样做,这不是你想要的。

代码语言:javascript
运行
复制
setBlogs(false);

我不能告诉您如何解决这个问题,但是这个信息应该可以帮助您调试它。首先,我将查看您的命令行终端中是否有任何错误正在注销。也许您的服务器由于某种原因无法连接数据库?或者完全是别的东西。

祝好运!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62923250

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档