I am making a project to add users in MongoDB but I am getting ERR_HTTP_HEADERS_SENT

Question

import axios from 'axios';

// const usersUrl = 'http://localhost:3003/users';
const usersUrl = 'http://localhost:8020/users';

export const getUsers = async (id) => {
    id = id || '';
    return await axios.get(`${usersUrl}/${id}`);
}

export const addUser = async (user) => {
    return await axios.post(`${usersUrl}/add`, user);
}

export const deleteUser = async (id) => {
    return await axios.delete(`${usersUrl}/${id}`);
}

export const editUser = async (id, user) => {
    return await axios.put(`${usersUrl}/${id}`, user)
}

This my client code when I try to add user it adds the user and details in back end in mongo db but cant view it in the front end when I click on the specific user.

import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import axios from "axios";
const usersUrl = 'http://localhost:8020/users';

const View = () => {
  const [user, setUser] = useState({
    projectname: '',
    projecttype: '',
    numberofissuesreported: '',
    retestlead: '',
    progress: '',
    startdate: '',
    enddate: '',
    
  });
  const { id } = useParams();
  useEffect(() => {
    loadUser();
    //getUsers();
  }, []);
  const loadUser = async () => {
    const res = await axios.get(`http://localhost:8020/users/add`);
    setUser(res.data);
  };

And this is my view.jsx file.

Answer 1

As the error mentions clearly, if you use response.send, it sends the data to the client. You cannot modify the states once they are sent.

Corrected Code:

export const addUser = async (request, response) => {
    // retreive the info of user from frontend
    const user = request.body;
    // Removed the line  

    const newUser = new User(user);
    try{
        await newUser.save();
        response.status(201).json(newUser);
    } catch (error){
        return response.status(404).json({ message: error.message});     
    }
}

Tip: If you are debugging, just use console.log instead of response.send and see those values on the terminal.

Example:

export const addUser = async (request, response) => {
    // retreive the info of user from frontend
    const user = request.body;

    console.log("Executing..");
    console.log(user);
     
    const newUser = new User(user);
    try{
        await newUser.save();
        response.status(201).json(newUser);
    } catch (error){
        return response.status(404).json({ message: error.message});     
    }
}