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

wwwo4jvm  于 12个月前  发布在  React
关注(0)|答案(2)|浏览(124)

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

useEffect(() => {
    async function initialize() {
      const params = await getParamsFromUrl();
      if (params.code) {
        await getTokenAndSaveToSession(params.code);
        await fetchJourneyData(); // Renamed the function to make it clearer
      } else {
        console.log('There is no code in the params');
      }
    }

    initialize();
  }, []); // The empty dependency array ensures that the effect runs only once on mount

  async function getTokenAndSaveToSession(code: string) {
    try {
      const authService = new AuthService();
      const result = await authService.getToken(code);
      sessionStorage.setItem('token', result.token);
      sessionStorage.setItem('expiration', result.expiration.toString());
    } catch (error) {
      console.log(error);
    }
  }

字符串

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

相关问题