1

これはバグか設定ミスの可能性があると思います。次のエラーが表示されます。 networkError: ServerError: Response not successful: Received status code 500

初めてフォームを送信すると、目的の結果が得られますが、もう一度送信ボタンを押すと、上記の networkError メッセージが表示されます。

  const client = useApolloClient();
  const [val, setValu] = useState({
    email: 'example@example.com',
    password: 'password',
    texterror: {
      status: false,
      text: ''
    },
  })


//the submit function below: 

  const handleLogin = async (e) => {
    e.preventDefault();
    await client.query({
      query: Handle_Login, 
      variables: {
        email: val.email, 
        password: val.password
      }
    }).then((e) => {
      console.log(e)
    }).catch((e) => {
      setValu({
        texterror: {
          status: true, 
          text: 'it be broke yo'
        }
      })
    })
  }

setValu({texterror: {status: true, text: 'it be broke yo'}})ただし、キャッチで削除すると、500エラーはなくなります。送信ボタンをスパムしても、500 エラーは表示されません。

現時点では、この問題を回避するためだけに setState を内部に含めるつもりはありませんが、この問題の解決策があるかどうかを知りたいです。

どんな助けでも大歓迎です。前もって感謝します！

4

2 に答える 2

1

useState フックを使用すると、状態 val 全体を上書きすることに注意してください。これは、電子メールとパスワードを取得していないことを意味します。これは、クラス ベースのコンポーネントからフックに移行する際によくある見落としです。変更されなかった状態の部分も追加すると、すべてが再び機能するはずです。

于 2019-10-15T23:36:32.887 に答える
1

最上位では、サーバー側で何らかのエラーを引き起こしていることは明らかです。500コードは、「内部サーバー エラー」があることを意味します。したがって、サーバーコードを実際に見て、予期しない入力から保護する方法を見つけて、エラーやクラッシュが発生せず、代わりに400「不正な要求」であるコードを返すようにする必要があります。

そこで問題になるのは、フロントエンド コードが不正なサーバー リクエストを引き起こしている原因は何なのかということです。

クラスコンポーネントで従来の呼び出しをsetValu()使用するのと同じ方法で (React フック)を使用しようとしていると思われます。setStateただし、動作はまったく異なります。

クラス コンポーネントsetStateで、古い状態と新しい状態の "浅いマージ" を実行します。あなたがした場合：

setState({
  texterror: {
    status: true, 
    text: 'it be broke yo'
  }
});

状態オブジェクトのフィールドのみを見つけtexterrorて更新する場合。

ただし、React フックの動作は異なります。useState()単一のアトミック値を作成し、setValu()それをcomplete と呼ぶと、 に格納されている以前の値を置き換えますval。

そう：

  const [val, setValu] = useState({
    email: 'example@example.com',
    password: 'password',
    texterror: {
      status: false,
      text: ''
    },
  });

  // val is now an object with 'email', 'password', and 'texterror' fields


  setValu({
    texterror: {
      status: true, 
      text: 'it be broke yo'
    }
  });

  // val is now an object with only a 'texterror' field

使用しているコードでは、値を電子メールまたはパスワード フィールドを持たないものにsetValu完全に置き換えており、サーバーに送信されると内部サーバー エラーが発生します。val簡単な修正は、更新時に の古い値をval目的の新しいオブジェクトと単純にマージすることです。

  setValu({
    ...val,
    texterror: {
      status: true, 
      text: 'it be broke yo'
    }
  });
于 2019-10-15T23:38:05.970 に答える