Javascript 通过表单为用户响应更新配置文件

我正在尝试构建一个更新配置文件表单，用户可以在其中更改其详细信息，并在提交时将新数据发送到

PUT/users

端点以更新数据库中的详细信息。表单将预先填写旧值（通过对同一

/users

端点的

GET

请求获得）。为了访问这个端点，我们还需要发送一个带有电子邮件和密码的基本身份验证头。现在我发出两个获取请求，一个获取现有的细节，另一个放置新的细节。我的第一个

GET

请求成功，我可以看到预填充的数据，但我的第二个

POST

请求不起作用。我做错了什么？ 下面是我的代码的外观

每次渲染时都会调用useEffect，因为您没有提到任何依赖项数组。你的情况是

组件渲染-->useEffect调用-->生成api调用-->设置状态-->组件重新渲染-->useEffect调用-->生成api调用，此循环将永远持续

useEffect(() => {
  ....
}); => this useEffect will trigger on first render and every re-render

useEffect(() => {
  ...
}, []); => this will trigger only for the first time when the component is mounted


useEffect(() => {
  ...
}, [value]);  => triggers on first render and whenever the value changes 

如果您熟悉基于类的组件，则通常在

componentDidMount

lifecycle方法中进行API调用。此方法仅在第一次渲染后调用一次。有关这方面的更多信息：

在代码中，您使用的是

useffect

，它或多或少类似于

componentdiddupdate

生命周期方法，在每次渲染时都会调用该方法。这就是为什么,

页面加载后，我可以在“网络”选项卡中看到无尽的GET请求字符串

有关这方面的更多信息：

解决方案是使

useffect

hook的行为类似于

componentDidMount

lifecycle方法，本质上是告诉

useffect

hook只运行一次

如果我们检查挂钩，它由两部分组成：

回调函数（必需）

道具依赖项列表（可选）

看起来是这样的：

useffect（回调，[依赖项]）；

例如：

useffect（（）=>{
console.log（道具颜色）
}，[props.color]）；

所以本质上我们是说，每当属性

color

改变时，我们都想记录

color

的值

如果我们传递一个空的依赖项数组，那么

useffect

钩子将只运行一次，这就是您应该做的。请注意，如果未传递依赖项数组，它的行为仍将类似于

componentdiddupdate

lifecycle方法，即它将在每次渲染时执行

如果您刚刚跳过此部分，则解决方案是：

在

useffect

hook中传递一个空的依赖项列表

更多关于钩子的信息：

---

非常感谢。在

handleSubmit

函数中的第二个

PUT

请求仍然不起作用，你能告诉我哪里出了问题吗？你能在你的handleSubmit中添加一个控制台日志并检查它是否被打印出来吗？它没有被打印出来，我已经对注册表单应用了相同的逻辑，它在那里工作，谢谢！handleSubmit函数中的第二个PUT请求仍然不起作用，您能告诉我哪里出了问题吗？我认为handleSubmit方法没有问题，但验证部分可能会给您带来麻烦。尝试删除isValid检查，然后提交表单。我对注册页面使用了相同的验证，并且有效，即使在删除验证后，也不会发出POST请求

useEffect(() => {
  ....
}); => this useEffect will trigger on first render and every re-render

useEffect(() => {
  ...
}, []); => this will trigger only for the first time when the component is mounted


useEffect(() => {
  ...
}, [value]);  => triggers on first render and whenever the value changes