React-使用React钩子，在useEffect中设置一个数组状态，并观察它引起无限循环

Question

声明自定义挂钩：

const useTest = (init: any) => {
const [arr, setArr] = useState<any[]>([]);
useEffect(() => {
setArr(Array.from(init.arr));
}, [init]);
return arr;
};

使用它：

useTest({ arr: [1] })

无论我把什么对象或数组传递给init.arr，它都会导致一个无限循环。我试图用useMemo包装init对象，它没有用。但如果我传递一个(string|number|null|undefined(，它不会出错。

我用"@testinglibrary/react-hooks"来测试它。更重要的是，它只出现在我的测试用例中，但在浏览器中运行良好。

那是什么原因呢？

Answer 1

您需要传递}, []);，如下所示，以便在加载组件时只加载一次useeffect。它还应该消除任何无限循环问题

React.useEffect(() => {
setArr(Array.from(init.arr));
}, []);