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

运行程序时出现此错误：

无效的钩子调用。钩子只能在主体的内部调用 功能组件。以下情况之一可能会发生这种情况： 原因: 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一ap中可能有多个React副本

import React，{Component}来自“React”；
从“react”导入{useffect，useState}；
从“react dom”导入react dom；
常量应用=（）=>{
const APP_ID=“”；
const APP_KEY=“”；
常数exapmle=”https://api.edamam.com/search? 
q=鸡和app_id=${app_id}和app_key=${app_key}”；
useffect（（）=>{
console.log（“已生效”）；
}); 
const[counter，setCounter]=useState（0）；
返回(
你好，世界
搜寻
设置计数器（计数器+1）}>{counter}
);};
导出默认应用程序（）；

尝试

导出默认应用程序

而不是

导出默认应用程序（）

我做了一些你可以做的其他调整，即：

• 在

  示例中使用反勾号

• 通过添加第二个参数

  []

从“React”导入React；
从“react”导入{useffect，useState}；
常量应用=（）=>{
const APP_ID=“”；
const APP_KEY=''；
常量示例=`https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&APP_key=${APP_key}`；
useffect（（）=>{
log（'useffect将运行一次，如果我将第二个参数[]传递给它）；
console.log（示例）；
//eslint禁用下一行
}, []);
const[counter，setCounter]=useState（0）；
返回(
你好，世界
搜寻
设置计数器（计数器+1）}>{counter}
);
};
导出默认应用程序；

添加了代码格式和修正了次要语法，使问题更清晰。

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();

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;