无限获取使用中的数据反应中的影响.js

Question

嗨，我正在尝试使用名为fetchMerchant的个人构建的 axios 函数获取数据。

我在 useEffect 钩子中提供了依赖项fullData但在渲染和重新渲染后似乎无限循环。

在我看来，它应该在 useEffect 钩子之后渲染一次，因为依赖fullData作为数组给出。

使用效果后如何防止无限渲染？

const BoardPage: FC =() => {
const [fullData, setData] = useState<ContentType>({} as ContentType);
const fetchData = async() => {
try{
const [,response] = await fetchMerchant();
console.log(response);
setData(response);
} catch(error){
console.log(error);
}
}
useEffect(() => {
console.log("board rendered");
fetchData();
},[fullData]) 
return(
<>
<Board data={fullData} /> 
</> 
)
};

Answer 1

由于钩子的设置方式，它无限运行。当您在钩子末尾的括号中放置某些内容时[fullData]这意味着当该值更改时，钩子将触发。在这种情况下，您不希望发生这种情况，因为钩子内部fetchData()会导致fullData发生变化，从而再次触发钩子。如果将支架留空，则在安装组件时应仅触发一次

useEffect(() => {
console.log("board rendered");
fetchData();
},[])