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

Question

我有一个组件，它是处理输入组件

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，我应该怎么做？我不得不承认我在这里迷路了。

谢谢大家

Answer 1

所以看起来你违反了钩子的一条规则：

仅从React函数调用挂钩

在FacebookApiCall中，您正在从非react函数调用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>
);
};