如何在next.js应用程序中显示来自API的消息？

Question

这是我使用 Next.js 的第一周，我对 React 的经验非常有限。 场景 -

我在基本注册/登录表单提交时调用此方法。

  const formSubmit = async (e, name) => {
    e.preventDefault();
    const url = `${url_prefix}/${formName}`

    try {
        const response = await fetch(url, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ user }),
        });
        console.log(response) // show message here
        if (response.ok) {
            router.push('/validateuser')
        } else if (response.status === 401) {
            msgFn({message: 'Invalid Credentials', type: 'F'})
            setTimeout(() => {
                msgFn({type: ''})
            }, 3000);
        }
      } catch (error) {
      }
  };

我的后端是在express.js 中，类似的东西

const createuser = async (req, res) => {
    try {
        console.log(req.body)
        const { username, email, password } = req.body.user;
        const userExist = await User.findOne({ email: email })

        if (userExist) {
            return res.status(401).send({message: 'User already exists.'})
        }
        const user = await User.create({ username, email, password })

        const new_user = await User.findOne({ email: email })
        const userId = new_user._id

        await LoggedUser.deleteMany({});
        const loggedUser = await LoggedUser.create({ username, email, userId })
        res.json({ message: 'User Created' })

    } catch (error) {
        console.error(error)
    }
}

如果用户电子邮件已在数据库中，我从后端发送“用户已存在”，并且在 Chrome 的网络选项卡中，我可以看到它

但是当我尝试控制台“响应”时，我在响应对象中看不到消息。

我专门检查错误代码是否为 01，但这不是一个好方法，因为消息可能会有所不同。

那么我怎样才能显示来自BE的消息呢？

其余 html 代码（如果需要）

Answer 1

您在执行 console.log 时看到的是 fetch 请求返回的

Response

对象。它包含有关请求的信息以及处理该请求的函数。在您的情况下，由于您期望 json 响应，因此您应该执行

response.json()

来获取有效负载数据。尝试用它来执行 console.log 并查看它是否有效。

这就是它的样子：

const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ user }),
});
console.log(response.json()) // show message here using .json()