Im getting an error when I try to use a react hook in a Teams App-CodePudding

I am developing a microsoft Teams App. I did a React JS project before starting the Teams app (which is pretty much the same thing) and I had not issues everything was working well. My problem is whenever I try to call a hook in a useEffect function it's not working in my teams App but it was in my other React.js project.

The console tells me: "Hooks can only be called inside of the body of a function component".

I am using react 16.14 btw.

App.js file

import React, { useEffect, useState } from "react";
import { Container, AppBar, Typography, Grow, Grid } from '@material-ui/core';
import { useDispatch } from 'react-redux';
import logo_digiposte from './images/logo_digiposte.png'

import { getContractors } from "./actions/contractors";
import useStyle from './styles'
import Form from './components/Form/Form';
import Contractors from "./components/Contractors/Contractors";


const App = () => {
  const [currentId, setCurrentId] = useState(0);
  const classes = useStyle();
  const dispatch = useDispatch;

  /*useEffect(() => {
    dispatch(getContractors());
  },[currentId, dispatch])*/

  useEffect(() => {
    dispatch(getContractors());
  }, [dispatch]); 


  return (
    <Container>
      <AppBar className={classes.appBar} position="static" color="inherit">
        <Typography variant="h2" className={classes.heading} align='center'>Digiposte</Typography>
        <img src={logo_digiposte} className={classes.image} alt="digiposte" height="60"/>
      </AppBar>
      <Grow in>
        <Container>
          <Grid container className={classes.mainContainer} justifyContent="space-between" alignItems="stretch" spacing={3}>
            <Grid item xs={12} sm={7}>
              <Contractors />
            </Grid>
            <Grid item xs={12} sm={4}>
              <Form />
            </Grid>
          </Grid>
        </Container>
      </Grow>
    </Container>
  )
}
export default App;

folder which contains the getContractor function

import { FETCH_ALL, CREATE, UPDATE, DELETE } from "../constants/actionTypes";
import * as api from '../api/index.jsx';

export const getContractors = () => async (dispatch) => {
    try {
        const { data } = await api.fetchContractors();

        dispatch({ type: FETCH_ALL, payload: data });
    } catch (error) {
        console.log(error);
    }
}

api file:

import axios from 'axios'

const url = "http://localhost:5003/contractors";

export const fetchContractors = () => axios.get(url);

CodePudding user response：

Convert const dispatch = useDispatch; to const dispatch = useDispatch();

CodePudding user response：

Convert you useEffect method as:

useEffect(() => {
  dispatch(getContractors());
}, []);

No need to pass dispatch in your useEffect method. If you are going to call getContractors action only once.

and there is typo I guess. const dispatch = useDispatch()