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

但是，如果我在 catch 中删除setValu({texterror: {status: true, text: 'it be broke yo'}})，500 错误就会消失。我可以向提交按钮发送垃圾邮件，但不会收到 500 错误。

现在我不会在里面设置 setState 来避免这个问题，但我想知道这个问题是否有解决方案。

任何帮助，将不胜感激。先感谢您！

4

2 回答 2

1

在顶层，很明显您在服务器端造成了某种错误。代码表示存在500“内部服务器错误”。因此，您应该真正查看您的服务器代码并弄清楚如何防止意外输入，这样它就不会出错和/或崩溃，而是返回400“错误请求”的代码。

那么问题就变成了，你的前端代码导致了一个格式错误的服务器请求呢？

我怀疑您正在尝试使用setValu()（这是一个 React 挂钩），就像setState在类组件中使用传统调用一样。但是，它们的行为完全不同。

在类组件中，setState执行旧状态和新状态的“浅合并”。所以如果你这样做了：

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

如果只会找到texterror状态对象上的字段并更新它。

然而，React 钩子的工作方式不同。useState()创建单个原子值，当您调用setValu()它时，完成替换存储在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 回答
1

请记住，使用 useState 挂钩，您将覆盖整个状态 val。这意味着您不再拥有电子邮件和密码。从基于类的组件转移到钩子时，这是一个常见的疏忽。添加状态中没有改变的部分，它应该会再次工作。

于 2019-10-15T23:36:32.887 回答