Блог

Когда вы вызываете его в http://localhost:9000/testApi , это работает нормально.

testAPI.js

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

router.get("/",function(req,res){
    res.send("API is working fine");
});

module.exports = router;
 

Но вызов функционального компонента ReactJS ни к чему не приводит

 import React, {useState, useEffect} from 'react';
import TopicCard from './TopicCard.js'
import './HomePage.css'

function HomePage() {

const [apiResponse,setApiResponse] = useState('Loading..')
const url = "http://localhost:9000/"

useEffect(() => {
    fetch(url).then(res => setApiResponse(res.data))
}, [])

return (
    <> 
        <h1>Choose a topic to learn {apiResponse}</h1>
    </>
);
 

Консоль.журнал выдает это

Обещание {}[[Прототип]]: Обещание [[PromiseState]]: «отклонено» [[PromiseResult]]: Ошибка синтаксиса: неожиданный токен A в JSON в позиции 0

В то время как компонент класса работает отлично

 import React, {Component} from 'react'

class Test extends Component {

    constructor(props) {
        super(props);
        this.state = { apiResponse: "" };
    }
    
    callAPI() {
        fetch("http://localhost:9000/testAPI")
            .then(res => res.text())
            .then(res => this.setState({ apiResponse: res }));
    }
    
    componentWillMount() {
        this.callAPI();
    }

    render()
    {
        return (
            <div>
                <p className="App-intro">;{this.state.apiResponse}</p>
                
            </div>
        );
    }
}

export default Test
 

Нет различий между функциональными и классовыми компонентами.

Проблема

Вы забыли проанализировать свой ответ в виде текста в fetch методе.

Решение

проанализируйте ваши данные как a text , а затем сохраните их в своей переменной состояния

 useEffect(() => {
    fetch(URL)
        .then(res => res.text())
        .then(res => setApiResponse(res))
        .catch(err => console.warn(err))
}, [])
 

Примечание: не забудьте использовать catch метод для вашего API асинхронной выборки.

Объяснение

Когда ваши данные (ответ на вызов API) находятся в стандартном формате JSON, вам нужно проанализировать их с .json() помощью метода, и обычно data свойство содержит весь ответ, но в вашем случае (с текстом в качестве ответа) это бесполезно.

Вы путаете маршруты / конечные точки с именами файлов? testAPI.js это имя вашего файла. Это не ваша конечная точка.

Вы вызываете:

 const url = "http://localhost:9000/testAPI"

useEffect(() => {
    fetch(url).then(res => setApiResponse(res.data))
}, [])
 

Но ваша конечная точка — косая черта ‘/’, то есть корень (не МАРШРУТ) :

 router.get("/",function(req,res){
    res.send("API is working fine");
});
 

Попробуйте изменить это:

  const url = "http://localhost:9000/"
    
    useEffect(() => {
        fetch(url).then(res => setApiResponse(res.data))
    }, [])
 

Если вы хотите получить const url = «http://localhost:9000/testAPI » из react затем измените конечную точку на:
const url = «http://localhost:9000/testAPI «иначе сервер не узнает об этом.