用React前端设置Express后端。

基本上我知道这很简单,但我在设置前端与后端逻辑的对话时遇到了麻烦。我只是想从express中抓取数据,只是想知道它的工作情况,但我似乎都做不到。

我也在前端使用Next.js,这对我来说也是新的。

总之,这里是我试图从后台获取数据的页面。

我得到了一个无法设置属性’state’的undefined的消息。

  import React from "react";
import styled from "styled-components";
import axios from 'axios';

const TestApi = (props) => {
    this.state = {
        TestApi: ''
    }

    fetch('http://localhost:3001/users', {
        method: 'GET'
    })
        .then(response => response.text())
        .then(response => this.setState({ TestApi: response }))
    // response.json().then(body => {
    //     this.setState({ TestApi: `http://localhost:3001/users${body.body}` })
    // })

    return (
        <p>{this.state.TestApi}</p>
    )
}



export default TestApi;

这里是我的后台代码,托管在3001端口。路由:user.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function (req, res, next) {
  res.text('respond with a resource');
});

module.exports = router;

这里是app.js

const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");

// const port = process.env.PORT || 3001;

app.use(logger('dev'));
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const usersRouter = require("./routes/users");
app.use("/users", usersRouter);


module.exports = app;

解决方案:

你使用的是功能组件,而且它不具备以下功能 this 语境。你必须使用 useState 用下面的函数组件。

const TestApi = (props) => {
    const [testApi, setTestApi] = React.useState('');

    fetch('http://localhost:3001/users', {
        method: 'GET'
    })
        .then(response => response.text())
        .then(response => setTestApi(response))
    // response.json().then(body => {
    //     this.setState({ TestApi: `http://localhost:3001/users${body.body}` })
    // })

    return (
        <p>{testApi}</p>
    )
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

检查列表中的XML值

2022-9-8 14:18:22

未分类

如果k<n,在大小为n的列表的第k个位置添加元素的最佳方法。

2022-9-8 14:29:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索