递归/循环调用useEffect-React

Question

我检查了stackoverflow，尽管有类似的问题，但没有一个能解决我的问题。

我有一个组件，如果它从父元素接收到更新，就会触发useEffect。因此，它调用一个函数来刷新一些组件并加载新组件。问题是，在执行此功能时，一些元素被修改，useEffect再次被触发。我已经尝试修改useEffect的参数，使其只刷新某些值，但它无法正常工作。

错误：

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies

代码：

export const PsqMainPanel = ({idtest}) => {

const [currentTest, setCurrentTest] = useState(<PsqEmpty />);

const loadUnitTest = useCallback ((idtest) => {
console.log(idtest);
const newTest = getPsqTestLoader(idtest);
if (newTest == null)
return;
//Load new test.
console.log("Load new test: " + {idtest});
setCurrentTest(newTest);
}, []);

useEffect(() => {
loadUnitTest(idtest);
}, [idtest]);

return(
<>
{currentTest}
</>
);

}

这是有问题的元素的代码。如果您注意到，如果idtest发生更改，则会执行本示例中的useEffect。我用[]尝试过，但很明显，它只在启动时激发useEffect(如果idtest更改，则不会运行(，也没有循环运行的[]，还有循环运行的currentTest。

我所做的是用一个"；"空"；元素(PsqEmpty(。getPsqTestLoader函数根据其标识符返回另一个React元素(const newTest=getPsqTest Loader(idtest(，一旦函数成功生成React元素，它就会加载到父元素中(setCurrentTest(newTest((。它正确加载，但它一直无限期地调用useEffect如果loadUnitTest函数中的值发生了更改，我如何才能不触发useEffect函数？

谢谢！

Answer 1

我认为罪魁祸首是switchTest，它正在父组件中设置currentTest。你正在把它传递给callback道具，我相信它一得到它就会调用这个函数。你能试着把(id)=>switchTest(id)传递给callback道具吗？