react.js应用程序中的无效钩子调用

Question

Having this error when running the program:

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: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same ap

import React,  { Component } from "react";
import {useEffect,useState}  from "react";
import ReactDOM from 'react-dom'; 
const App = () => {
const APP_ID = "";
const APP_KEY = "";
const exapmle = "https://api.edamam.com/search? 
q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}";
  useEffect(()=>{
  console.log("effect has been");
  }); 

const [counter,setCounter] = useState(0);
return (
<div>
  <h1>hello world</h1>
  <form classname="search-form">
    <input classname="search_bar" type="text"></input>
    <button classname="search-button" type="submit">Search</button>
  </form>
  <h1 onClick = {()=> setCounter(counter+1)}> {counter}</h1>
</div>);};
export default App();

Answer 1

Try export default App instead of export default App() .

I made a few other tweaks you can test in CodeSandbox , namely:

• Using backticks to embed template literals in example
• Limiting useEffect to a single execution by adding a second argument of []

import React from 'react';
import { useEffect, useState } from 'react';
const App = () => {
  const APP_ID = '';
  const APP_KEY = '';
  const example = `https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`;
  useEffect(() => {
    console.log('useEffect will run once if I pass it a second argument of []');
    console.log(example);
    // eslint-disable-next-line
  }, []);

  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h1>hello world</h1>
      <form className='search-form'>
        <input className='search_bar' type='text'></input>
        <button className='search-button' type='submit'>
          Search
        </button>
      </form>
      <h1 onClick={() => setCounter(counter + 1)}> {counter}</h1>
    </div>
  );
};
export default App;