Reactjs React gatsby登录验证失败

我正在用盖茨比做我的应用程序。我已经从中创建了一个api。我的api看起来像。我已经提出了一个登录的post请求，当用户将他/她的电子邮件和密码，如果它不匹配，那么它会提醒“登录失败”，或者如果它是成功的，它会提醒（“成功登录”），并导航到成功的页面。但无论我用什么样的电子邮件和密码，它总是显示我成功登录，这是错误的逻辑。该电子邮件应类似于我的api的电子邮件：

alak@gmail.com“

和密码：

test123

。我认为我的逻辑正确，但我仍然犯了错误。我在中共享我的代码。

PS:Codesandbox基于react。但逻辑与我下面的代码相同

这是我的密码：

import React, { ReactElement, useState } from 'react';
import { PageProps, navigate } from 'gatsby';
import styled from 'styled-components';
import MainTemplate from '../templates/index';
import { TextInput } from '../components/textInput';
import { Button } from '../components/buttons';
import { API_URLS } from '../utilities';

interface Props extends PageProps {

}

export default function SignIn({ }: Props): ReactElement {
  const [state, setState] = useState({
    "email": ``,
    "password": ``,
    "loading": false

  });
  const { loading } = state;
  const signInValue = (e) => {
    setState({
      ...state,
      [e.target.id]: e.target.value
    });
  };
  const onSubmit = async (e) => {
    e.preventDefault();
    console.log(state);
    setState({
      "loading": true,
      ...state
    });
    const response = await fetch(`https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461`, {
      "method": `POST`,
      "headers": {
        "Accept": `application/json`,
        'Content-Type': `application/json`
      },
      "body": { state }
    });
    if (response.ok) {
      alert(`you have suceefully login`);
      navigate(`/success`, { "state": { email } });
    } else {
      alert(`login failed`);
    }
  };
  return (
    <MainTemplate>
      <TextInput
        type="text"
        value={state.email}
        onChange={signInValue}
        id="email"
        required
      />
      <TextInput
        type="password"
        value={state.password}
        onChange={signInValue}
        id="password"
        required
      />
      <Button
        type="submit"
        name="action"
        onClick={onSubmit}
        disabled={loading}
      >  {loading ? `loading...` : `save`}
      </Button>

    </MainTemplate>
  );
}

import React，{ReactElement，useState}来自'React'；
从“盖茨比”导入{PageProps，navigate}；
从“样式化组件”导入样式化；
从“../templates/index”导入MainTemplate；
从“../components/TextInput”导入{TextInput}；
从“../components/buttons”导入{Button}；
从“../utilities”导入{API_URL}；
接口道具扩展了页面道具{
}
导出默认函数SignIn（{}:Props）：ReactElement{
常量[状态，设置状态]=使用状态({
“电子邮件”：``，
“密码”：``，
“加载”：错误
});
常量{loading}=状态；
常量符号值=（e）=>{
设定状态({
……国家，
[e.target.id]：e.target.value
});
};
const onSubmit=async（e）=>{
e、 预防默认值（）；
console.log（状态）；
设定状态({
“加载”：正确，
…州
});
const response=等待获取(`https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461`, {
“方法”：“POST”，
“标题”：{
“接受”：`application/json`，
“内容类型”：“应用程序/json”`
},
“机构：{state}
});
if（response.ok）{
警报（`您已成功登录'）；
导航（`/success`，{“state”：{email}）；
}否则{
警报（`login failed`）；
}
};
返回(
{正在加载？`loading…`:`save`}
);
}

根据以下内容：

从fetch（）返回的承诺不会在HTTP错误状态下拒绝，即使响应是HTTP 404或500。相反，它将正常解析（ok status设置为false），并且它只会在网络故障或任何阻止请求完成的情况下拒绝

因此，您的api可能返回错误，但

响应。ok

可能仍然为真。您应该改为检查

response.status！==200

更新：根据您的沙盒按如下所示工作：

---

事实上，我刚刚在postman中尝试了你问题中的url，很好，我从你的API中得到了200个响应；你的前端逻辑中一定有其他错误。你在代码中看到我做错了什么了吗？这是我应用程序中唯一的组件。我共享我的代码Sandbox@krisna更新的答案，并更正了你的代码。当我测试wit时h错误的电子邮件，仍然说

登录成功