Блог

Я использую Gatsby для своего приложения. Я создал один api из Mock api. Мой api выглядит следующим образом. Я сделал один post-запрос для входа в систему, когда пользователь вводит свой адрес электронной почты и пароль, если он не совпадает, тогда он предупредит «сбой входа в систему», или, если это успех, он предупредит («успешный вход») и перейдет на страницу успешного входа. Но какой бы адрес электронной почты и пароль я ни вводил, он всегда показывает мне, что я успешно вошел в систему, что является неправильной логикой. Электронное письмо должно быть похоже на адрес электронной почты моего api: alak@gmail.com" и пароль: test123 . Я думаю, что моя логика правильная, но все же я совершаю ошибку. Я делюсь своим кодом в Codesandbox. PS: Codesandbox is based on react. but logic is same as my below code

Вот мой код:

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

В соответствии со спецификацией выборки:

Обещание, возвращенное из fetch(), не будет отклонено при статусе ошибки HTTP, даже если ответом является HTTP 404 или 500. Вместо этого он будет разрешен нормально (со статусом ok, установленным на false), и он будет отклоняться только при сбое сети или если что-либо помешало завершению запроса.

Таким образом, ваш api может возвращать ошибку, но response.ok все равно может быть true. Вместо этого вы должны проверить response.status !== 200 .

Обновление: работает, как показано ниже, в зависимости от вашей изолированной среды: