react.js 应用程序中的无效挂钩调用答案

【问题标题】：Invalid hook calls in react.js applicationreact.js 应用程序中的无效挂钩调用
【发布时间】：2020-01-06 05:53:05
【问题描述】：

运行程序时出现此错误：

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

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

【问题讨论】：

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

标签： javascript reactjs api

【解决方案1】：

尝试使用export default App 而不是export default App()。

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

在example 中对embed template literals 使用反引号
Limiting useEffect to a single execution 通过添加第二个参数 []

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;

【讨论】：