Question

我正在useEffect内获取数据，目的是使用获得的数据更新useState。即使控制台日志显示已接收到数据，我仍在oneCrypto状态值内获取null。意识到它与useState中缺少第二个参数有关。当添加[]空数组时，我的oneCrypto显示为null。当我将数组中的[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>
    </>
}

Answer 1

调用var legend = []; function addColors(colorSet) { for (let i = 0; i < colorSet.length; i++) { let obj = {}; // <- new object should be defined here legend.push(obj); legend[i].color = colorSet[i]; } } addColors(["red", "orange", "purple", "yellow"]); console.log(legend);会导致重新渲染，并且自从再次调用上一个渲染setOneCrypto以来oneCrypto已更改，然后过程重新启动。在useEffect内部调用useEffect发生在更新值之前，因为更新发生在渲染之间。

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

Answer 2

您的循环是：

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

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

!oneCrypto && getOneCrypto();

反应useEffect内存泄漏，第二个参数

2 个答案: