我认为这可能是一个错误或配置错误。 我收到此错误：networkError: ServerError: Response not successful: Received status code 500
第一次提交表单我会得到想要的结果，但是如果我再次点击提交按钮，我会收到上面的网络错误消息。
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 内部，但我想知道是否有解决此问题的方法。
任何帮助将不胜感激。提前谢谢你！
在顶层，很明显你在服务器端导致了某种错误。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'
}
});
请记住，使用 useState 钩子，您将覆盖整个状态值。这意味着您不再有电子邮件和密码。从基于类的组件移动到钩子时，这是一个常见的疏忽。添加状态中没有更改的部分，它应该会再次工作。