TypeError: JSON.stringify(...).then is not a function - React JS

Question

I am trying to connect my react app with the backend for log in page. I am using a promise to return a success message.

login.js

    onSubmitSignIn = () => {
        fetch('http://localhost:5000/', {
              method : 'post',
              headers :{ 'Content-Type' : 'application/json'},
              body : JSON.stringify({
                   userId : this.state.userId,
                   password : this.state.password
             }).then(response => response.json())
               .then(data => {
                    if(data === 'success'){
                            this.props.onRouteChange('home');
                    }
             })
        })
    }

Backend code -

  exports.findById = (req) => {
         return new Promise((resolve) => {
               var sql = "Select * from users where userid = '" + req.body.userId + "' ;";
               connection.query(sql,req,  function (error, results, fields) {
                    var data = JSON.parse(JSON.stringify(results)); 
                    var valid = false; 
                    if( data.length !=0 && req.body.userId === data[0].userid && req.body.password === data[0].password)
                         valid = true; 

                    if(valid) {
                         resolve({message : "success"});
                    }else{
                         reject({ message :"fail"});
                    }
              });
        })
  };

After clicking on sign in button, I am getting an error "TypeError: JSON.stringify(...).then is not a function"

I tried some solutions from similar questions, it did not work in my case.

you sure there is a JSON format data in variable results? and extra thing, I don't think is wise for u to passing sql query via javascript — Se0ng11
– Se0ng11, Commented Dec 27, 2019 at 7:59

Geetanjali · Accepted Answer · 2019-12-27 08:01:50Z

5

The then should be outside of fetch

fetch('http://localhost:5000/', {
    method : 'post',
    headers :{ 'Content-Type' : 'application/json'},
    body : JSON.stringify({
         userId : this.state.userId,
         password : this.state.password
   })
}).then(response => response.json())
  .then(data => {
    if(data === 'success'){
            this.props.onRouteChange('home');
    }
})

answered Dec 27, 2019 at 8:01

Geetanjali

4684 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

felixmosh · Accepted Answer · 2019-12-27 08:17:26Z

2

You have a typo, .then should be on fetch not on JSON.stringify.

onSubmitSignIn = () => {
  fetch("http://localhost:5000/", {
    method: "post",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      userId: this.state.userId,
      password: this.state.password
    })
  })
//-^
    .then(response => response.json())
    .then(data => {
      if (data === "success") {
        this.props.onRouteChange("home");
      }
    });
};

edited Dec 27, 2019 at 8:17

answered Dec 27, 2019 at 8:03

felixmosh

35.9k10 gold badges81 silver badges99 bronze badges

Comments

Amit Chauhan · Accepted Answer · 2019-12-27 07:59:53Z

0

you have missed a bracket. there should be a closing bracket after JSON.stringify().

onSubmitSignIn = () => {
  fetch('http://localhost:5000/', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      userId: this.state.userId,
      password: this.state.password
    })
  }).then(response => response.json())
    .then((data) => {
      if (data === 'success') {
        this.props.onRouteChange('home');
      }
    });
};

answered Dec 27, 2019 at 7:59

Amit Chauhan

7,0192 gold badges26 silver badges39 bronze badges

Comments

De Prof · Accepted Answer · 2022-11-11 21:34:42Z

0

I had this problem too. Check and confirm that you're not importing or requiring {JSON} in your application. It's most likely referring to that imported JSON rather than the global

answered Nov 11, 2022 at 21:34

De Prof

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

TypeError: JSON.stringify(...).then is not a function - React JS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related