时间戳

首页 > 解决方案 > 通过表单为用户更新配置文件

javascript - 通过表单为用户更新配置文件

问题描述

我正在尝试构建一个更新配置文件表单，用户可以在其中更改他的详细信息，并且 onSubmit 新数据将被发送到PUT/users端点以更新数据库中的详细信息。表单将预先填写旧值（通过GET对同一/users端点的请求获得）。要访问此端点，我们还需要发送带有电子邮件和密码的基本身份验证标头。现在我正在发出两个 fetch 请求，一个用于获取现有详细信息，一个用于 PUT 新详细信息。我的第一个GET请求已成功发出，我可以看到预填充的数据，但我的第二个POST请求不起作用。我究竟做错了什么？这是我的代码的外观。https://codesandbox.io/s/dawn-breeze-itinq?file=/src/App.js

在此处输入图像描述

标签： javascriptreactjsreact-hooksfetchuse-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

推荐阅读