大佬教程收集整理的这篇文章主要介绍了React 简单的 fetch 程序陷入无限循环，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个简单的程序，它从节点后端接收一些 JsON 数据并将接收到的数据设置为状态。问题是它无限次重置状态，创建无限渲染。
这里是 JsON 数据
[
{
"ID": 1,"name": "Product 1","category": "C1","price": "100"
},{
"ID": 2,"name": "Product 2","price": "80"
},{
"ID": 3,"name": "Product 3","category": "C3","price": "120"
}
]
这是反应程序。
import React,{ useState } from 'react'
const MainApp = () => {
const [products,setProducts] = useState([])
fetch("http://localhost:5000/products")
.then((res) => res.Json())
.then((res) => {setProducts(res)})
.catch((err) => console.error(err))
console.log("Products:",products) //This keep getTing logged forever.
return (
<h1>Test</h1>
)
}
export default MainApp
我做错了什么？
在 MainApp 的每次渲染上都会连续执行提取。考虑使用 effect 来解决这个问题。
,你应该只在组件挂载时调用 fetch。由于您使用的是钩子，因此您应该使用 `
useEffect(()=> {
fetch("http://localhost:5000/products")
.then((res) => res.json())
.then((res) => {setProducts(res)})
.catch((err) => console.error(err))
},[])
`
您现在正在做的是在每次渲染时调用 fetch。想象一下。您正在渲染组件，在此期间您正在获取某些内容并更新状态。当状态更新时，它会重新渲染组件，您将进入无限循环。
,问题出在 {setProducts(res)} 这将更新状态并重新渲染组件，然后第二次调用 fetch 函数，依此类推
以上是大佬教程为你收集整理的React 简单的 fetch 程序陷入无限循环全部内容，希望文章能够帮你解决React 简单的 fetch 程序陷入无限循环所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。