Fetch request stuck on pending and then doesn't go through-CodePudding

I'm making a full stack Rick and Morty application. Characters on the screen and the user can login and click on them to add them to favorites and then click on them on the favorites page to delete them from the favorites page.

The application works but crashes after a few minutes saying that a fetch request didn't work. In network section of the developer tools, these requests to add or delete characters are coming up as (pending) and then coming up as failures like two minutes later. At the same time, the requests are working from the perspective of the application, meaning that if I add or delete characters as a user and then logout and log back in, the changes are still there. The register and login requests to the backend are working normally with statuses of 200 as well. What's happening here?

The backend:

const express = require('express');
const application = express();
const mongoose = require('mongoose');
application.use(express.json());

mongoose.connect('process.env.DATABASE_PASSWORD')
    .then(console.log('Connected to database'));

const db = mongoose.connection;

const port = process.env.PORT || 8080;

application.post('/register', (request, response) => {
    const username = request.body.username;
    const password = request.body.password;
    const favorites = [];
    db.collection('data').insertOne({
        username,
        password,
        favorites,
    });
});

application.post('/login', async (request, response) => {
    const username = request.body.username;
    const password = request.body.password;
    const findUser = await db.collection('data').findOne({
        username,
        password,
    });
    if (findUser) {
        response.send({ message: 'Welcome, '   username   "!", user: username, favorites: findUser.favorites });
    } else {
        response.send({ message: 'Login unsuccessful'});
    }
});

application.post('/addFavorite', (request, response) => {
    const userNow = request.body.username;
    const favoritesHere = request.body.favoritesCopy;
    console.log({userNow, favoritesHere});
    db.collection('data').updateOne(
        { username: userNow },
        { $set: { favorites: favoritesHere }},
    )
});

application.post('/deleteFavorite', (request, response) => {
    const userNow = request.body.username;
    const favoritesHere = request.body.theData;
    db.collection('data').updateOne(
        { username: userNow },
        { $set: { favorites: favoritesHere }},
    );
});

application.listen(port, () => {
    console.log('Application listening');
});

The frontend fetch add request (the delete request is similar):

import React, { useState, useEffect } from 'react';
import logo from '../rickandmortylogo.png';
import { useSelector, useDispatch } from 'react-redux';
import { addFavorite } from '../index.js';

const Body = () => {
  const [characters, setCharacters] = useState([]);
  const [currentName, setCurrentName] = useState('Placeholder');
  const [nameInput, setNameInput] = useState('');
  const [locationInput, setLocationInput] = useState('');
  const [loading, setLoading] = useState(true);

  const favorites = useSelector(state => state.favoritesList);
  const userNow = useSelector(state => state.currentUser);
  const loggedIn = useSelector(state => state.loggedIn);
  const dispatch = useDispatch();
  
  useEffect(() => {
      let isMounted = true;
      let url = 'https://rickandmortyapi.com/api/character/';
      let array = [];
      const getData = async () => {
        for (let i = 1; i < 4; i  ) {
          let response = await fetch(url);
          let data = await response.json();
          for (let j = 0; j < 20; j  ) {
          array.push(data.results[j]);
          }
          url = data.info.next;
        }
        if (isMounted) {
          setCharacters(array);
          setLoading(false);
        }}
      getData();
      return () => {
        isMounted = false;
      }
  }, []);

  const readInput = (e) => {
      setNameInput(e.target.value);
  }

  const readLocationInput = (e) => {
      setLocationInput(e.target.value);
  }

  const addData = (a, b, c, d) => {
    const array = [a, b, c, d];
    const favoritesCopy = [...favorites];
    favoritesCopy.push(array);
    dispatch(addFavorite(array));
    if (loggedIn === true) {
      fetch('/addFavorite', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          favoritesCopy,
          username: userNow,
        }),
      });
    }
  };

  return (
    <div className="pt-5">
    <div className="text-center mt-5">
      <img src={logo} className="img-fluid" />
    </div>
    <h2>Click on a character here to add them to your favorites. Choose "Check Favorites" in the menu bar to see your favorites and "Search Characters" to come back.</h2>
      <div className="all">
        <h4>Search by name:</h4>
        <input onChange={readInput} />
        <h4>Search by location:</h4>
        <input onChange={readLocationInput} />
        <br />
        <div className="row m-1">
        
        {loading ? 'Loading can take a few seconds. Your Rick and Morty experience will be ready soon!' : characters.filter((item) => {
          if (nameInput == "") {
            return item;
          } else {
            if (item.name.toLowerCase().includes(nameInput.toLowerCase())) {
              return item;
            }
          }
        }).filter((item) => {
          if (locationInput == "") {
            return item;
          } else {
            if (item.location.name.toLowerCase().includes(locationInput.toLowerCase())) {
              return item;
            }
          }
        }).map((item, id) => {
          return (
          <>
              <div className="col-md-4 border border-dark rounded" id="square" onClick={() => addData(item.name, item.image, item.location.name, item.status)}>
              <h2>{item.name}</h2>
              <img src={item.image} className="border rounded" />
              <h4>Location: {item.location.name}</h4>
              <h4>Status: {item.status}</h4>
              </div>
          </>
          )
        })}
        </div>
      </div>
    </div>
  );
};

export default Body;

CodePudding user response：

Of course requests are pending, you never send anything on related actions:

Use res.send and send something, or at least in case of success, send a success status like:

204 for a no content success operation, like a DELETE for example. 201 for a POST operation creating a new resource. 5xx for errors

CodePudding user response：

You never end the request. You don't send anything in the response and don't call response.end either, nor next. That's why your request never ends.

Here are some examples:

Success message with content

res.status(200).json({ "success" : "true"});

Success message without content

res.sendStatus(204);