Search code examples
node.jsreactjsaxiosreact-fullstack

Can't return the result from Axios


I'm doing a full-stack project these days. This is my first full-stack project also. So I came up with a problem today. So my backend store data in MongoDB and, this function post the data to the MongoDB database and then return a response of data if it succeded. if not succeded then the returns error.My backend code relevant to that:

exports.registerOnlineUser = (req, res) => {
  User.findOne({ email: req.body.email }).exec((error, user) => {
    if (error) {
      res.status(400).json({ message: error });
    }
    if (user) {
      return res.status(400).json({
        message: 'User exists already',
      });
    }
    const { fullName, email, address, cardName, cardNo, expDate, cvv } =
      req.body;
    const userCategory = 'Online';
    const newUser = new User({
      fullName,
      email,
      address,
      cardName,
      cardNo,
      expDate,
      cvv,
      userCategory,
    });
    newUser.save((error, data) => {
      if (error) {
        return res.status(400).json({
          message: error,
        });
      }
      if (data) {
        return res.status(201).json({
          user: data,
        });
      }
    });
  });
};

So the saving data function in the front end is like this. In this function

console.log(response);

is also working fine. It's logging the data which I enetered.

const saveFormData = async () => {
    await axios({
      method: 'post',
      url: 'http://localhost:7000/userInfo/registerOnline',
      data: registerData,
      validateStatus: (status) => {
        return true;
      },
    })
      .catch((error) => {
        console.log(error);
        return error
      })
      .then((response) => {
        console.log(response);
        return response;
      });
  };

But below function is always returns a null value for the result. So I'm getting the return value of saveFormData as null when I call in this and console.log it.

try {
  const result = await saveFormData();

  console.log(result);
  alert('Your registration was successfully submitted!');
} catch (e) {
  alert(`Registration failed! ${e.message}`);
}

So why its return null value for that function when I call it and how to solve that problem? Thanks in advance.


Solution

  • Your saveFormData function doesn't return anything

    const saveFormData = async () => {
        return axios({ //you need to return in your saveFormData scope also
          method: 'post',
          url: 'http://localhost:7000/userInfo/registerOnline',
          data: registerData,
          validateStatus: (status) => {
            return true;
          },
        })
          .catch((error) => {
            console.log(error);
            return error
          })
          .then((response) => {
            console.log(response);
            return response;
          });
      };