reactjs дублирующийся запросы fetch

Question

Есть вот такой код

getinfo = async (e) => {
var userinfo = await fetch(`https://site.com?token=${token}`);
var data = await userinfo.json();
}

Но при его вызове из render запрос fetch повторяется два раза. Как это исправить?

Answer 1

Скорее всего вы используете StrictMode. По документации в строгом режиме происходит двойной вызов метода render. Попробуйте отключить StrictMode.

https://ru.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Answer 2

Попробуйте вот так, забросив саму функцию и ее вызов в useEffect

import React, { useEffect } from 'react';

function your_component (){
  useEffect(()=>{
    const getinfo = async (e) => {
      var userinfo = await fetch(`https://site.com?token=${token}`);
      var data = await userinfo.json();
    };
    getinfo(e);
  },[])
  return(
    <Your_render_here />
  )
}

данный хук используется только в функциональных компонентах, но здесь можно найти пример с использованием классов. Важно, данное решение вызывается только после того как все зарендерится. Если необходимо использовать данный вызов при определенных условиях, то используется хук useState()

import React, { useState, useEffect } from 'react';

function your_component (){
  const [state, setState] = useState(false);

  useEffect(()=>{
    ......
  },[state]);
  return(
    <Your_render_here />
  )
}

при такой конструкции при изменении состояния state переменной будет вызываться функция, которая находится внутри useEffect-конструкции

БЛОГ НА HUSL

reactjs дублирующийся запросы fetch

Ответы (2 шт):