axios 响应数据不使用 useState 保存答案

【问题标题】：Axios response data is not saved with useStateaxios 响应数据不使用 useState 保存
【发布时间】：2021-06-23 21:27:41
【问题描述】：

在尝试从我的 express 后端和 MySQL 数据库中获取数据时，我的反应前端使用 axios，它无法使用 useState 设置获取的数据

我的前端函数是这样的

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

我的后端函数是这样的

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 });
      }
    }
  );
};

我在使用 useState 挂钩保存数据时尝试了很多方法，感谢任何帮助

【问题讨论】：

“设置失败”是什么意思？
无法使用 useState 挂钩将响应保存到 const
您是否尝试过 console.logging 响应？你在前端得到了正确的响应吗？
@vanpersie22 “保存失败”是什么意思？在提出未来的问题之前，请阅读how to ask，以帮助使问题适合 Stackoverflow 并帮助人们回答您的问题。尽可能具体地说明您的问题会有所帮助，尤其是您期望发生的事情以及没有发生的事情。

标签： javascript reactjs express axios

【解决方案1】：

在使用 Promises 而不是 async / await 时，请确保在获取失败时捕获错误。

除非您与我们分享包含 searchUser 函数的整个组件以及您如何定义状态，否则我无法指出错误。

我建议您通过执行以下操作为您的 fetch 添加一个捕获：

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

如果您的请求发生任何异常，catch 会告诉您！不要小看它的力量。

您可以查看的另一条路径是将您的输出控制台记录在前端searchUser 函数中，然后再将其设置为状态。

【讨论】：

【解决方案2】：

我确实解决了这个问题，只是通过替换 res.json({ result });到 res.json（结果）；在我的后端函数的最后一行

【讨论】：