错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 - 反应

Question

So I'm trying to declare a state then make an API call then set the state but I'm encountering Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: Error. I have checked my react version and react dom and it is fine and I do not have two copies of React. Here is a simplified version of my code:

function RandomScreen(){
    const [State, setState] = useState([])
    
    let history = useHistory()
    var style = require('./Random.css')
    
    useEffect(async function(){
        // Make API call
        .then(function(response){
            setState(response.data)
        })
    }, [])
    
    async function handleClick(){
        // Make API call
        // Set State again
    }
    return (
        // Some HTML code
    )
}

App.js

function App(){
    return (
        <Router>
          <Switch>
            <Route path="/random">
              <RandomScreen />
            </Route>
          </Switch>
        </Router>
    )
}

After some debugging I found out that let history = useHistory() is the cause of this problem but I need useHistory hook

Answer 1

useEffect callback cannot be async. First define the async function then call it. Change this to:

useEffect( () => {
    
    async function apiCall() {
        // Make API call
    }
    
    apiCall()
        .then(function(response){
            setState(response.data)
        })
},[])