React Hook "useEffect" 在函数 "shoes" 中被调用，它既不是 React 函数组件也不是自定义 React Hook答案

【问题标题】：React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React HookReact Hook "useEffect" 在函数 "shoes" 中被调用，它既不是 React 函数组件也不是自定义 React Hook
【发布时间】：2020-07-04 04:43:24
【问题描述】：

我收到以下错误：

React Hook "useEffect" 在函数 "shoes" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-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;

【问题讨论】：

试试大写的S
哇！这解决了问题！ “鞋”。所以总而言之，所有组件都必须以大写字母开头？感谢您的帮助！
另外，两种方法都可以：function Shoes() 和 const Shoes = () =>{ 只需要开头的大写字母
是的，他们这样做是为了明确区分 <div>、<a> 等和 React 组件

标签： javascript reactjs react-hooks

【解决方案1】：

如here 所述，React 组件名称需要以大写字母开头。
这是因为 React 将以小写字母开头的组件视为 DOM 标签。

因此你应该将它命名为Shoes。

【讨论】：

你是冠军！

【解决方案2】：

我还想添加对我有用的解决方案。这应该是一个组件，因此将第一个字母大写有效，但如果您尝试创建一个挂钩并且发生上述错误，请在挂钩的开头附加 use。例如useShoes()

【讨论】：