Настройка Express бэкэнда с React Front-end

Question

Так что, в принципе, я знаю, что это очень просто, но у меня возникают проблемы с настройкой внешнего интерфейса, разговаривающего с моим логином бэкэнда c. Я просто пытаюсь получить данные из express, просто чтобы знать, как они работают, и я даже не могу этого сделать.

Я также использую Next. js в новом для меня интерфейсе.

В любом случае, вот страница, на которой я пытаюсь получить доступ к серверу ..

У меня не получается установить свойство 'состояние' из неопределенного

  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. route: users. 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;

и вот приложение. 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;

Answer 1

Вы используете функциональные компоненты, и у него нет контекста 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>
    )
}