Как получить данные без хуков useEffect в компоненте функции React?

Question

Я знаю, что обычный способ использования ловушек - это извлечение данных с помощью ловушки useEffect. Но почему я не могу просто вызвать ax ios в функциональном компоненте вместо хука, а затем установить данные.

По сути, я спрашиваю, что не так:

const [users, setUsers] = useState(null);
axios.get("some api call")
  .then(res => setUsers(res.data))

Здесь я не использую useEffect, что могло go не так?

Answer 1

Предпочитайте useEffect(() => code... , []).

Тем не менее, вы также можете сделать это, избегая бесконечного l oop, но это очень плохая практика, и я не рекомендую ее.

Да, у вас будет повторный рендер, но у вас не будет бесконечного l oop. Используйте функцию отложенной инициализации useState .

const [users, getUsers] = useState(() => {
   axios.get("some api call")
     .then(res => getUsers(res.data))
});

Answer 2

Выполнение запроса и изменение состояния при рендеринге, как это, приведет к тому, что компонент будет повторно рендериться навсегда. 1004 *, этот запрос axios.get вызывается. Когда он получит ответ, он обновит состояние. Затем, поскольку состояние изменилось, компонент выполняет повторную визуализацию, и снова вызывается axios.get. И состояние снова меняется, и запрос делается снова, навсегда.

Answer 3

Лучшая практика:

const [users,getUsers]= useState();
useEffect ( () => {
   axios.get("some api call")
  .then(res=>getUsers(res.data))
}, []);