Axios 响应数据不与 useState 一起保存

Question

While trying to fetch data from my express backend and MySQL database, with my react frontend using axios, it fails to set the fetched data using useState

my frontend function looks like this

const searchUser = () => {
    Axios.post("http://localhost:3001/searchUser", {
      username: username,
    }).then((response) => {
      if (response.data) {
        setResult(response.data);
      }
    });
  };

and my backend function looks like this

const searchUser = (req, res) => {
  const keyword = req.body.username;
  db.query(
    "SELECT id,username FROM users WHERE username like ?",
    "%" + keyword + "%",
    (err, result) => {
      if (err) {
        res.json({ message: err });
        console.log(err);
      } else {
        console.log(result);
        res.json({ result });
      }
    }
  );
};

I tried many methods while saving the data with the useState hook, I appreciate any help

Answer 1

While using Promises and then instead of async / await make sure to catch the errors if your fetch fails.

Unless you share with us the whole component that contains the searchUser function and how you defined the state i cannot pin point you on the error.

What i suggest you to do is adding a catch to your fetch by doing the following:

const searchUser = () => {
    Axios.post("http://localhost:3001/searchUser", {
      username: username,
    }).then((response) => {
      if (response.data) {
        setResult(response.data);
      }
    }).catch((error) => {
      console.error(error);
    });
  };

If any abnormalities has happened in your request the catch will tell you! Don't underestimate it's power.

Another path you can look into is console logging your output in front end searchUser function just before setting it in the state.

Answer 2

I did solve the problem, just by replacing res.json({ result }); to res.json(result); in the last line in my backend function