Как настроить параметры реагирования для изменения запроса API на сервере?

Question

Я пытаюсь динамически визуализировать данные в реагирующее приложение из внешнего API с помощью Express.

Мой компонент реагирования имеет состояние, определяющее, какую страницу извлекать из API.

То, чего я хочу достичь, - это когда я нажимаю кнопку «Загрузить еще», компонент отправляет, чтобы выразить номер следующей страницы, отправляя обратно данные.

Это то, что я пробовал, но безуспешно:

Экспресс:

const express = require('express');
const fetch = require('node-fetch');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/products', (req, res) => {
    const page = req.query.pages;
    let url = `https://frontend-intern-challenge-api.iurykrieger.now.sh/products?page=${page}`;
    fetch(url).then((response) => response.json()).then((contents) =>
        res.send({
            products: contents.products,
            nextPage: contents.nextPage
        })
    );
});

app.listen(process.env.PORT || 8080);

Реакция компонента:

import React, { useEffect, useState } from 'react';
import fetch from 'node-fetch';

const Products = () => {
    const [ products, setProducts ] = useState([]);
    const [ page, setPage ] = useState(1);
    const loadProduct = () => {
        setPage(page + 1);
    };
    useEffect(() => {
        fetch(`http://localhost:3000/products?pages=${page}`).then((response) => response.json()).then((contents) => {
            setProducts([ ...products, ...contents.products ]);
        });
    }, []);
    return (
        <div>
            {products.map((product) => <p>{product.name}</p>)}
            <button type="submit" onClick={loadProduct}>
                Load More
            </button>
        </div>
    );
};

export default Products;