В ReactJs перехватчик useState входит в бесконечный цикл

Моя проблема в том, что я хочу выполнить асинхронную функцию, которая выполняется, когда пользователь обращается к странице, которую он выполняет, собирает данные из базы данных и показывает их пользователю, она работает, но в бесконечном цикле. Вот код:

  const [subbbed, setSubbed] = useState([])

  async function showSubscribed() {
    
        const response = await api.get('subscribed', {
               params: {
                   hour_id: person.id
               }
           })
    
        return response.data       
    }  
       
       useEffect(()=>{
        showSubscribed().then((data)=>{
            setSubbed(data)
        })
       })

И этот setSubbed (data) - тот, который генерирует цикл.


reactjs javascript async-await use-state promise
person Bruno D.    schedule 25.08.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы не передаете второй параметр useEffect, поэтому обратный вызов для него будет выполняться каждый рендеринг - поэтому showSubscribed вызывается при каждом рендеринге.

Если вы хотите, чтобы showSubscribed запускался только при первом монтировании компонента, передайте пустой массив в качестве второго параметра:

useEffect(
  () => {
    showSubscribed().then((data)=>{
      setSubbed(data)
    });
  },
  []
);

Точно так же, если вы хотите, чтобы обратный вызов useEffect запускался только при изменении конкретной переменной (например, скажем, у вас есть переменная pageNumber в области видимости), вы можете поместить эту переменную в массив:

useEffect(
  () => {
    showSubscribed().then((data)=>{
      setSubbed(data)
    });
  },
  [pageNumber]
);

Это приведет к вызову showSubscribed

  • на первом рендере и позже,
  • всякий раз, когда значение pageNumber изменяется

useLayoutEffect работает так же.

person CertainPerformance    schedule 25.08.2020
comment
Это сработало, спасибо, я сходил с ума от этого XD, я еще новичок в reactJs - person Bruno D.; 25.08.2020