我可以在 React 中的函数中调用"useEffect"吗？

Question

这是我真正想要的用例useEffect在函数中调用，但是我不能这样做。

我有一个下拉菜单，它从我在页面加载开始时调用的API调用中获取数据。根据这个下拉列表中的选择，我对从下拉列表中获取的选定值的ID执行setState。然后我有另一个下拉菜单，这是一个名为React QueryBuilder的库的一部分，我需要传递一个onChange函数。在这个onChange函数中，我调用useEffect，然后传递我从前面提到的setState中获得的ID -当我这样做时，我得到一个错误消息告诉我，我不能在函数中调用useEffect，但我需要在这里调用它，因为我需要进行API调用并将ID传递给API。

如果我有函数名在所有小的情况下，我得到下面的错误:

React Hook "useEffect"在function "functionname"它既不是React函数组件，也不是自定义React钩子

如果我将函数重命名为"FunctionName"，我得到以下错误:*

无效的钩子调用。类的函数体中只能调用钩子功能组件

如果我不使用useEffect，该API调用将进入连续循环!

我想不出任何其他的方法——有人能给我点光或帮助我在正确的方向上做什么吗?

更新:对于API调用，我目前使用的是useEffect"one_answers";axios"-这有错吗?我添加了"useeffect";如果存在连续循环问题。请看下面的例子:

const ABCFunction = (event) => {
axios.get("APIURL/Getsomething").then((response) => { setState(response.data);
});

在代码的一部分中，上面的代码没有进入连续循环，但是在我以同样的方式调用API的另一部分中，它进入了连续循环，所以我添加了useEffect，这给了我这个问题。

这是我用useEffect钩子做的API调用——这个函数位于页面内部。

import abc
import cdf
..
..
const pageView =() => {
.
.
.
.
const getFunction = (fieldName) => {
const field = filteredIfData.find(fld => fld.name === fieldName);
useEffect(() => {
axios.get(`$apiURL`).then((response) => {
setState(response.data);
},[]);
.
.
.
};
export default pageView 

Answer 1

从你的描述和错误信息中，我得到了两个关键的事情，你做错了:

1. 从onChange处理程序调用useEffect钩子:

onChange={FunctionThatCallsUseEFfectHook}

2. 没有useEffect钩子，通过立即调用获得无限循环

<>以前onChange = {FunctionThatCallsImmediately ()}解决方案:

1. 你不能从事件处理程序中使用useEffect钩子。相反，使用基于值变化的useEffect钩子:

useEffect(() =>{//不在onChange处理程序中//……}， [ValueThatChangesOnSelection])

2. 如果没有useEffect钩子，只在更改时调用函数，而不是立即调用:

<>以前onChange = {() => onChangeHandler ()}或

onChange={onChangeHandler}

但不是这个:

<>以前onChange = {onChangeHandler ()}