json 如何显示从网络选项卡到React组件的响应?

66bbxpm5  于 2022-11-19  发布在  React
关注(0)|答案(1)|浏览(123)

我正在处理一个react表单,如果用户已经在数据库中注册,表单基本上会返回一个响应,否则表单会成功提交。
有一个fetch函数可以获取URL并返回响应。
当存在具有邮件ID的现有用户时,我在网络选项卡中得到以下消息。

我需要在React组件中的屏幕上显示此消息。
这是提取体

fetch(URL, {
    method: "POST",
    mode: "no-cors",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      "Access-Control-Allow-Origin": "*",
    },
    body: formBody,
  })
    .then((response) => console.log(response))
    .catch((err) => console.log(err));

我得到的响应与网络选项卡中的响应相差甚远。我也尝试使用json(),但我得到了某种错误。
需要帮助。

zbdgwd5y

zbdgwd5y1#

首先,你需要使用.then((response) => response.json())将响应转换为JSON。要通过获取URL获得响应数据消息,你需要在.then((data)=> {...})函数中调用以下代码data.msg。如果你想打印消息,你有两个选择:
1.您可以使用console.log(data.msg)将其记录到控制台
1.通过首先将消息存储在如下变量中,在组件中返回该消息:.then(...)函数中的let msg = data.msg,然后添加以下代码:

return (
<>
<h1> {msg} </h1>
...
</>
)

相关问题