即使获取数据没有改变，UseEffect 仍然运行答案

【问题标题】：UseEffect still runs even if fetch data doesnt change即使获取数据没有改变，UseEffect 仍然运行
【发布时间】：2021-03-04 16:19:29
【问题描述】：

我有这个 UseEffect() 代码，即使我通过了第二个参数，即使数据没有改变，它也会继续重新渲染，知道吗？希望尽快得到解决方案（MERN）

前端

const [qty, setQty] = useState([])
useEffect(() => {
    fetch('/QtyCheck',{
        headers:{
            "Content-Type":"application/json"
        }
    })
    .then(res=>res.json())
    .then(qtyValue=>{
        setQty(qtyValue)
    })
},[qty])enter code here

后台

    router.get('/QtyCheck',(req,res)=>{
    Post.find({},{qty:1,minT:1,criT:1, code:1,name:1,isDisable:1})
    .then(postFind=>{
        if(postFind.length===0){
            res.json("nil")
        }else{
           res.json(postFind)
        }
    }).catch(noPost=>{
        res.json("Error",noPost)
    })
})

【问题讨论】：

您在 useEffect 中设置了 qty，导致它再次调用它
@szczocik，是的，这就是意图，数量实时变化，我只想在提取数据从先前已经存在的数量数据发生变化时调用提取
是的，但是依赖数组指定只要更改qty 变量，然后在useEffect 中更改它，就会执行useEffect。这将导致不断更新
@szczocik，是的，但在我的情况下，数量有时会发生变化，并且我只想在数量通过 fetch 发生变化时重新渲染，是否有解决方案？通常我会刷新页面，但我认为这不是最佳选择
所以它在后端定期更改而无需用户交互？在这种情况下，您可以进行轮询 - 每隔 60 秒就定期获取数据。您还可以查看 websockets 或类似技术，以允许后端在发生更新时发送更新，在这种情况下您将更新前端。

标签： reactjs react-hooks mern

【解决方案1】：

我认为你在这里做了一个无限循环，因为你是如何设置括号结尾的 [qty]

render > useEffect > fetchData > [Qty]（表示数据变化）>re-render >useEfect > 以此类推

这里最重要的部分是空括号[]

相反，您可以创建一个单独的函数，例如：


const fetchdata = () =>
{
fetch('/QtyCheck',{
        headers:{
            "Content-Type":"application/json"
        }
    })
    .then(res=>res.json())
    .then(qtyValue=>{
        setQty(qtyValue)
    })
}
useEffect(()=>{
fetchdata()
},[])`

【讨论】：

感谢@Salem_Raouf 的支持，但如果数量有任何变化，我想再次获取数据，如果没有任何变化，我不希望它呈现。有办法吗？

【解决方案2】：

你的状态是一个数组。这意味着即使 fetch 返回相同的内容结果，它也会有不同的引用。 React 不会从深层次进行比较，它会进行浅层比较，并且每个数组都有不同的引用，因此会多次获取。为了解决这个问题，您可以将字符串化版本[JSON.stringify(qty)] 传递给依赖数组，或者在发送下一个请求之前在您的钩子上进行一些有条件的深度比较。

无论如何，您似乎还需要在后端和前端之间建立一个开放的通道，因此每次后端有更新时，它都会将其发送回前端，因为您说无论前端交互，它都会在后端不时更改。如果是这种情况，您可以使用诸如 socket.io 之类的库在前后之间创建此通道。

【讨论】：