React Hook "useEffect" вызывается в функции "shoes", которая не является ни компонентом функции React, ни пользовательским React Hook

Question

Я получаю следующую ошибку:

React Hook "useEffect" вызывается в функции "shoes", которая не является ни компонентом функции React, ни пользовательской функцией React Hook реагировать на крючки / правила -s-hooks

Я не совсем уверен, что именно ошибка в моем коде:

import React, {useState, useEffect} from 'react';
import "../App.css"

function shoes() {
    useEffect(() => {
        fetchItems();
    }, []);

    const fetchItems = async () => {
        const data = await fetch('xxxxxxxxxxxxxxxxxxxxx')
        console.log(data)
    };

    return ( < h1 className = "main" > Shoes < /h1> );
    }
}

export default shoes;

Answer 1

Как описано здесь , имена компонентов React должны начинаться с заглавной буквы.
Это связано с тем, что React рассматривает компоненты, начинающиеся с строчных букв, как теги DOM.

Поэтому вам следует назвать это Shoes.

Answer 2

useEffect необходимо добавить в тело компонента функции. Он не может быть включен в другую функцию. useEffect будет вызываться после монтирования компонента.

Попробуйте добавить следующее:

const YourComponent = () => {
   useEffect(() => {
       const fetchItems = async () => {
          const data = await fetch('<url>')
          console.log(data)
       };

       fetchItems();
   },[]);

   // rest of the component

   return ( <h1 className="main">Shoes</h1> );
}

Рекомендуемое прочтение: Использование захвата эффектов

Надеюсь, это поможет!