Javascript React简单获取程序运行到无限循环中

我有一个简单的程序，它从节点后端接收一些JSON数据，并将接收到的数据设置为状态。问题是它会无限次重置状态，从而创建无限渲染

下面是JSON数据

[
  {
    "id": 1,
    "name": "Product 1",
    "category": "C1",
    "price": "100"
  },
  {
    "id": 2,
    "name": "Product 2",
    "category": "C1",
    "price": "80"
  },
  {
    "id": 3,
    "name": "Product 3",
    "category": "C3",
    "price": "120"
  }
]

这是react程序

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

import React，{useState}来自“React”
常量MainApp=（）=>{
const[products，setProducts]=useState（[]）
取回（“http://localhost:5000/products")
.然后（（res）=>res.json（））
。然后（（res）=>{setProducts（res）}）
.catch（（err）=>console.error（err））
console.log（“Products:，Products）//这将永远被记录下来。
返回(
试验
)
}
导出默认MainApp

---

我做错了什么？

在MainApp的每个渲染上都会连续执行提取。考虑使用AN来解决这个问题。

< P>问题是在<代码> {Studio产品（RES）}<代码>中，这将更新状态并重新呈现组件，然后调用第二次获取函数，所以

当组件安装时，只应调用FETCH。因为您使用的是钩子，所以应该使用`

useEffect(()=> {
fetch("http://localhost:5000/products")
        .then((res) => res.json())
        .then((res) => {setProducts(res)})
        .catch((err) => console.error(err))
}, [])

`

---

您现在正在做的是对每个渲染调用fetch。想象一下。您正在呈现组件，在此期间您正在获取某些内容并更新状态。当状态更新时，它将重新启动组件，您将进入无限循环。

每次重新呈现组件时，您都会不断调用fetch，当您在React中更新状态时，组件将重新呈现，整个函数中的所有内容都将再次调用，您应该将fetch放入带有空依赖项的

useffect

钩子中，以确保在组件的初始呈现时只调用一次。您可以在此处阅读有关

useffect

的内容：