我正在尝试构建一个更新配置文件表单，用户可以在其中更改他的详细信息，并在提交时将新数据发送到PUT/users 端点以更新数据库中的详细信息。表单将预先填写旧值（通过GET 请求到相同的/users 端点）。要访问此端点，我们还需要发送带有电子邮件和密码的基本身份验证标头。现在我正在发出两个 fetch 请求，一个用于获取现有详细信息，一个用于 PUT 新详细信息。我的第一个GET 请求已成功发出，我可以看到预填充的数据，但我的第二个POST 请求不起作用。我究竟做错了什么？
这是我的代码的外观。 https://codesandbox.io/s/dawn-breeze-itinq?file=/src/App.js
【问题讨论】：
标签： javascript reactjs react-hooks fetch use-effect
const getUsers = async () => {
let myHeaders = new Headers();
myHeaders.set('Authorization', 'Basic ' + credentials);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow',
};
try {
const response = await fetch(`${APIlink}/users`, requestOptions);
const result = await response.json();
setData(result);
} catch (err) {
setErr('Incorrect Password. Please Retry.');
}
};
useEffect(() => {
getUsers();
}, []);
你 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
【讨论】：
handleSubmit 函数中的第二个 PUT 请求仍然不起作用，你能告诉我哪里出错了吗？
如果您熟悉基于类的组件中的lifecycle methods，您通常会在componentDidMount 生命周期方法中进行API 调用。此方法仅在第一次渲染后调用一次。更多信息：https://reactjs.org/docs/react-component.html#componentdidmount
在您的代码中，您使用的是useEffect，它或多或少类似于在每次渲染时调用的componentDidUpdate 生命周期方法。这就是为什么，
页面加载完毕，我可以在网络选项卡中看到无穷无尽的 GET 请求字符串。
更多信息：https://reactjs.org/docs/react-component.html#componentdidupdate
解决方案是让您的 useEffect 钩子表现得像 componentDidMount 生命周期方法，这实际上是告诉 useEffect 钩子只运行一次。
如果我们检查一个钩子，它由两个组件组成：
看起来像这样：
useEffect(Callback, [Dependencies]);
一个例子是：
useEffect(() => {
console.log(props.color)
}, [props.color]);
所以本质上我们是说，每当 color 属性发生变化时，我们都想记录 color 的值。
看看这是怎么回事，如果我们传递一个空的依赖数组，useEffect 钩子只会运行一次，这就是你应该做的。请注意，如果未传递依赖项数组，它的行为仍将类似于 componentDidUpdate 生命周期方法，即它将在每次渲染时执行。
如果您只是跳到这部分，解决方法是：
在您的 useEffect 挂钩中传递一个空的依赖项列表。
更多关于钩子的信息：
【讨论】：