在ReactJS上挂载组件时获取多个身份验证请求

wwwo4jvm  于 2024-01-07  发布在  React
关注(0)|答案(2)|浏览(159)

我请求在Salesforce Marketing Cloud上对我的网页进行身份验证,身份验证必须仅进行一次并存储。
我的问题是,当我请求验证并获取代码时,我收到两个请求,第一个请求成功,第二个请求错误。
问为什么我在react js上得到两个请求一个useEffect?我的组件加载了两次吗?
下面是我的代码:

  1. useEffect(() => {
  2. async function initialize() {
  3. const params = await getParamsFromUrl();
  4. if (params.code) {
  5. await getTokenAndSaveToSession(params.code);
  6. await fetchJourneyData(); // Renamed the function to make it clearer
  7. } else {
  8. console.log('There is no code in the params');
  9. }
  10. }
  11. initialize();
  12. }, []); // The empty dependency array ensures that the effect runs only once on mount
  13. async function getTokenAndSaveToSession(code: string) {
  14. try {
  15. const authService = new AuthService();
  16. const result = await authService.getToken(code);
  17. sessionStorage.setItem('token', result.token);
  18. sessionStorage.setItem('expiration', result.expiration.toString());
  19. } catch (error) {
  20. console.log(error);
  21. }
  22. }

字符串

xesrikrc

xesrikrc1#

根据React文档,在开发过程中,React会挂载你的组件两次,以确保你的组件渲染是纯的。
React在开发过程中故意重新挂载你的组件来发现bug,就像上一个例子一样。正确的问题不是“如何运行一次Effect”,而是“如何修复我的Effect,使它在重新挂载后工作”。
通常,答案是实现cleanup函数。cleanup函数应该停止或撤销Effect正在做的任何事情。经验法则是,用户不应该能够区分Effect运行一次(如在生产环境中)和setup → cleanup → setup序列(如您在开发中看到的)。
对于您的情况,如果您向其发出请求的服务器只允许请求一次,则您可能希望在组件发出第二次请求时处理这种情况,以便它重用在第一次请求中已经获得的身份验证代码。

9gm1akwq

9gm1akwq2#

因为您使用的是<StrictMode>.[react-docs]结果是useEffect运行两次,从而使您的API调用两次。如果您不希望这些额外的开发检查,只需删除<StrictMode>(不建议)或control useEffect

相关问题