React useEffect 内存泄漏，第二个参数答案

【问题标题】：React useEffect memory leak, second argumentReact useEffect 内存泄漏，第二个参数
【发布时间】：2021-01-28 03:54:43
【问题描述】：

我在 useEffect 中获取数据，目的是使用获得的数据更新 useState。即使控制台日志显示已收到数据，我仍然在 oneCrypto 状态值中获得 null 。意识到它与 useState 中缺少的第二个参数有关。添加 [] 空数组时，我的 oneCrypto 显示为空。当我在数组中设置 [oneCrypto] 作为依赖项时，我的应用程序崩溃 - 请求过多，控制台日志打印一遍又一遍收到的数据，我不明白为什么......请帮忙。


import React, { useState, useEffect } from "react"
import { useParams } from "react-router-dom"
export default function SingleCrypto() {
    const [loading, setLoading] = useState(false)
    const [oneCrypto, setOneCrypto] = useState(null)
    const { id } = useParams()
    useEffect(() => {
        async function getOneCrypto() {
            try {
                const proxyurl = "https://cors-anywhere.herokuapp.com/";
                const response = await fetch(proxyurl +
                    "https://pro-api.coinmarketcap.com/v1/cryptocurrency/info?id=" +
                    id,
                    {
                        headers: {
                            
                        }
                    }
                )
                const data = await response.json()
                const mydata = data.data;
                setOneCrypto(mydata)
                console.log(oneCrypto)
            } catch (error) {
                console.log(error)
            }
        }
        getOneCrypto()
    }, [oneCrypto])



    return <>
        <h1>I am Single Crypto page</h1>
    </>
}

【问题讨论】：

你为什么要在useEffect()中返回一个函数？

标签： reactjs use-effect

【解决方案1】：

调用 setOneCrypto 会导致重新渲染，并且由于 oneCrypto 已更改，因为上次渲染 useEffect 被再次调用并且进程重新启动。在您调用 console.log(oneCrypto) 的 useEffect 内部发生在值更新之前，因为更新发生在渲染之间。

尝试从传入第二个参数的数组中删除 oneCrypto 并在 useEffect 之外调用 console.log。

【讨论】：

【解决方案2】：

你的循环是：

1) |--> your async function call setOneCrypto ---| 
2) |--  new value of oneCrypto call useEffect <--|

如果 oneCrypto 是 null，你可能想要一个请求：

!oneCrypto && getOneCrypto();

【讨论】：