React-使用Axios进行API调用，如何将onClick事件与API调用绑定

如何解决React-使用Axios进行API调用，如何将onClick事件与API调用绑定

我只有一个组件，即手柄输入组件

import React,{useState} from 'react';
import FacebookApiCall from './Api'

export default function FacebookInterest () {
    const [interest,setInterest] = useState('');

    function HandleChange(event) {
        setInterest(event.target.value);
    }

    return (
    <div className="maincontainer">
      <input className="searchbar" type="text" placeholder="Type an interest ..." value={interest} onChange={HandleChange}/>
      <button onClick={() => FacebookApiCall(interest)} className="searchbutton">Search</button>
    </div>
    );
}

当用户单击时，由于要使用FacebookApiCall，我想对API进行调用

    import React,{useEffect} from 'react'
    import axios from 'axios'


export default function FacebookApiCall(props) {
    
    const url = `https://graph.facebook.com/search?type=adinterest&q=${props}&limit=10000&locale=en_US&access_token=EA`
    
     useEffect(() => {
         axios.get(url)
            .then(res => {
                console.log(url);
                console.log(res);
                
                //console.log(res.data.data[62].audience_size);
                //console.log(res.data.data[62].name);
                //console.log(res.data.data[62].description);
                //console.log(res.data.data[62].path);
            })
        });
        return (null);
}

react返回的错误是：

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:

1. 您可能使用了不匹配的React和渲染器版本（例如React DOM）
2. 您可能正在违反挂钩规则
3. 您可能在同一应用中拥有多个React副本

所以我不能在我的Facebook函数中使用钩子，我明白现在我如何不使用useEffect就能进行api调用，如果无论如何我都必须使用useEffect，我该怎么办？我必须承认我在这里迷路了。

谢谢很多人

解决方法

因此，您似乎违反了钩子规则之一：

仅来自React函数的调用挂钩

在您的FacebookApiCall中，您是从非反应性函数中调用useEffect挂钩。

执行此操作的正确方法是从组件中的函数进行api调用。

import React,{ useState,useEffect } from 'react';

function FacebookInterest () {
   const url = `https://graph.facebook.com/search?type=adinterest&q=${props}&limit=10000&locale=en_US&access_token=EA`
   const [interest,setInterest] = useState(null);
   const [response,setResponse] = useState(null);

   useEffect(() => {
      // If you want do do some other action after
      // the response is set do it here. This useEffect will only fire
      // when response changes.
   },[response]); // Makes the useEffect dependent on response.

   function callYourAPI() {
      axios.get(url).then(res => {
         // Handle Your response here.
         // Likely you may want to set some state
         setResponse(res);
      });
   };

   function HandleChange(event) {
      setInterest(event.target.value);
   };

   return (
      <div className="maincontainer">
         <input
           className="searchbar"
           type="text"
           placeholder="Type an interest ..."
           value={interest}
           onChange={HandleChange}
         />
         <button
           onClick={() => callYourAPI(interest)}   
           className="searchbutton"
           // You may want to disable your button until interest is set
           disabled={interest === null}
         >
           Search
         </button>
      </div>
   );
};