“useContext“ is called in function “index“

React Hook “useContext” is called in function “index” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word “use”

报错

Line 12:23: React Hook “useContext” is called in function “index” that is neither a React function component nor a custom React Hook function. React component names
must start with an uppercase letter. React Hook names must start with the word “use” react-hooks/rules-of-hooks
Line 13:43: React Hook “useState” is called in function “index” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word “use” react-hooks/rules-of-hooks
Line 15:5: React Hook “useEffect” is called in function “index” that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word “use” react-hooks/rules-of-hooks

环境

• react版本：18.2.0
• 打包工具：webpack

事故现场

import React, { useContext, useEffect, useState } from 'react';
import { globalContext } from '../../App';

export default function index(props: props) {

    const { theme } = useContext(globalContext)!
    const [uploadState, setUploadState] = useState(false);

    useEffect(()=>{
      setUploadState(upload);
    },[upload]);

  return (
    <div><div/>
  )
}

事故分析

报错的意思是你的useState、useEffect、useEffect在这里的用法都是错误的，既不是react定义的hook，也不是你自定义的hook。
但是我react的版本是18.2.0，怎么也不该不能用useState这些的。
后来我琢磨了一下，更准确的原因是你这个index函数不是一个react的函数组件也不是一个react的钩子函数，所以你在这里的useState的用法是错误的。

事故原因

export default function index()

解决方法

export default function EPie()

解决方法分析

不能直接用index给你的函数组件命名，即使直接生成的函数组件的名字是index，你也得改成其他的。