react-hooks 查询和 setState 导致 500 错误

Question

我认为这可能是错误或配置错误。 我收到此错误： 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 以避免此问题，但我想知道是否有解决此问题的方法。

任何帮助将不胜感激。提前谢谢！

Answer 1

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

Answer 2

在顶层，很明显您在服务器端造成了某种错误。 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'
    }
  });