Бесконечный Fetch в React

Question

Пытаюсь записать данные из POST запроса в переменную, при загрузке компонента, но получается пока только при нажатии на кнопку:

let [item, setItem] = useState(null)
        const itemFinder =  () => {
            try {
              setItem(item = fetch('/api/auth/getitems', {method: 'POST'}))
            } catch (error) {
              
            }
          }
    return (
                <button onClick={itemFinder}>!</button>
        )

Код сверху работает как надо, но мне нужно чтобы функция срабатывала автоматически при загрузке страницы, вот как это по идее должно выглядеть:

const itemFinder =  () => {
    try {
      setItem(item = fetch('/api/auth/getitems', {method: 'POST'}))
    } catch (error) {
      
    }
  }
itemFinder()

Но, к сожалению, этот код почему - то бесконечно вызывает функцию itemFinder из-за чего страница вылетает (очевидно система не выдерживает бесконечные запросы). Почему так происходит и как это исправить?

Answer 1

Оба ваших кода отрабатывают как полагается. первый срабатывает на клик, а второй на рендеринг компонента.

Чтобы работало как вы хотите нужно использовать "хуки", а именно useEffect.

Ваш код будет примерно таким:

import React, { useEffect, useState} from 'react';
import { render } from 'react-dom';

function App() {

  let [data, setData] = useState(null);

  async function getData(){

    let data = await fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(response => response.json())

    setData(data);
    
  }

  useEffect( () => {
    getData();
  }, []);

  return data != null ? <h1>{data.title}</h1> : "загрузка..."

}

render(<App />, document.querySelector('#app'));

БЛОГ НА HUSL

Бесконечный Fetch в React

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