Reactjs React.js中带有钩子的React钩子使用上下文错误

每当我试图将我的上下文导入组件时，它会在函数incomeExpenses中给出错误“React hook useContext”，它既不是React函数组件，也不是自定义钩子。我是React帮助的初学者，将不胜感激

这是我的app.js组件

import React from 'react';
import Header from './components/Header'
import Balance from './components/balance'
import IncomeExpenses from './components/incomeExpenses'
import TransactionList from './components/TransactionList'
import AddExpense from './components/AddExpenses'
import {ExpenseProvider} from './components/ExpensesContext'
import './App.css';

function App() {
  return (
    <ExpenseProvider>
      <div className="App">
            <Header />
            <Balance/>
            <IncomeExpenses />
            <TransactionList />
            <AddExpense />
      </div>
    </ExpenseProvider>
  );
}

export default App;

import React,{createContext,useState} from 'react'

export const ExpenseContext = createContext();
export const ExpenseProvider = (props) => {
    const[trans,setTrans] = useState([
        { id: 1, text: 'Flower', amount: -20 },
        { id: 2, text: 'Salary', amount: 300 },
        { id: 3, text: 'Book', amount: -10 },
        { id: 4, text: 'Camera', amount: 150 }
    ])

    return (
        <div>
                <ExpenseContext.Provider value={[trans,setTrans]}>
                    {props.children}
                </ExpenseContext.Provider>
        </div>
    )
}

从“React”导入React；
从“./components/Header”导入标题
从“./components/Balance”导入余额
从“./components/IncomeExpenses”导入IncomeExpenses
从“./components/TransactionList”导入TransactionList
从“./components/AddExpenses”导入AddExpense
从“./components/ExpensesContext”导入{ExpenseProvider}
导入“/App.css”；
函数App（）{
返回(
);
}
导出默认应用程序；

下面是我试图导入上下文的组件

import React,{useContext} from 'react'
import{ExpenseContext} from './ExpensesContext'
 const incomeExpenses = () => {
     const[trans,setTrans] = useContext(ExpenseContext)
     const myStyle={
         display:'flex',
         justifyContent:'space-around'
     }
    return (
        <div className="Container" style={myStyle}>
            <div>
                <h4>Income</h4>
                <p>0.00</p>  
            </div>
            <div>
                <h4>Expense</h4>
                <p id="lossMoney">0.00</p>
            </div>
        </div>
    )
}

export default incomeExpenses;

import React，{useContext}来自“React”
从“/ExpensesContext”导入{ExpenseContext}
const incomeExpenses=（）=>{
const[trans，setTrans]=useContext（ExpenseContext）
康斯特·迈斯泰尔={
显示：'flex'，
为内容辩护：“周围空间”
}
返回(
收入
0.00

费用
0.00
)
}
出口默认收入支出；

下面是上下文组件

import React from 'react';
import Header from './components/Header'
import Balance from './components/balance'
import IncomeExpenses from './components/incomeExpenses'
import TransactionList from './components/TransactionList'
import AddExpense from './components/AddExpenses'
import {ExpenseProvider} from './components/ExpensesContext'
import './App.css';

function App() {
  return (
    <ExpenseProvider>
      <div className="App">
            <Header />
            <Balance/>
            <IncomeExpenses />
            <TransactionList />
            <AddExpense />
      </div>
    </ExpenseProvider>
  );
}

export default App;

import React,{createContext,useState} from 'react'

export const ExpenseContext = createContext();
export const ExpenseProvider = (props) => {
    const[trans,setTrans] = useState([
        { id: 1, text: 'Flower', amount: -20 },
        { id: 2, text: 'Salary', amount: 300 },
        { id: 3, text: 'Book', amount: -10 },
        { id: 4, text: 'Camera', amount: 150 }
    ])

    return (
        <div>
                <ExpenseContext.Provider value={[trans,setTrans]}>
                    {props.children}
                </ExpenseContext.Provider>
        </div>
    )
}

import React，{createContext，useState}来自“React”
export const ExpenseContext=createContext（）；
导出const ExpenseProvider=（道具）=>{
const[trans，setTrans]=useState([
{id:1，文本：'Flower'，金额：-20}，
{id:2，文本：'Salary'，金额：300}，
{id:3，文本：'Book'，金额：-10}，
{id:4，文本：'Camera'，金额：150}
])
返回(
{props.children}
)
}

如Arpitha链接的答案中所述，功能组件使用大写字母：

const IncomeExpenses=（）=>{

我希望这有帮助-。将

incomeExpenses

重命名为

incomeExpenses