在这种情况下，如何从 API 调用中控制台记录数据？ [复制]答案

【问题标题】：How to console.log data from an API call in this situation? [duplicate]在这种情况下，如何从 API 调用中控制台记录数据？ [复制]
【发布时间】：2021-12-14 18:17:51
【问题描述】：

在 getData() 函数中，我正在控制台记录数据，以查看它在异步调用后是否正确设置为状态。它返回 Array[] 我猜这意味着数据集但 console.log 在获取完成之前正在运行。

useEffect 中的 console.log 可以正常工作，虽然它会记录两次。

有没有办法在 getData() 函数中使用 console.log 或者它是在 useEffect 中执行它的正确方法？

useEffect console.log 运行两次，因为我猜是在数据被检索并设置为状态后一次，然后在设置后，控制台在重新渲染后再次记录。

const TestComponent = () => {
    // State for Data
    const [data, setData] = useState([])
    // URL for Data
    const url = 'https://randomuser.me/api/?results=20'
    // Retrieve Data - Function
    const getData = async() => {
        const { results } = await (await fetch(url)).json()
        setData(results)
        console.log(data)
    }
    
    useEffect(() => {
        getData()
        console.log(data)
    },[])
return (JSX)

【问题讨论】：

最好的选择是停止使用 console.log() 并使用实际的调试器 - 在浏览器或 IDE 中。
是的，请再次阅读反应生命周期，它们与钩子的关系，使用效果中的第二个参数以及什么时候运行 w.r.t。 componentDidMount 和 componentDidUpdate。还要了解为什么 JavaScript 是一种非阻塞事件驱动语言，本质上是学习事件循环。

标签： javascript reactjs async-await react-hooks

【解决方案1】：

每当状态 data 改变时运行效果

useEffect(() => {
  if(data.length) {
    console.log(data)
  }
}, [data])

【讨论】：

这会导致无限循环。请更新您的答案
这不会导致无限循环，只要数据发生变化，数据就会被记录下来，我猜根据问题API调用将只在挂载时运行一次，因此数据将只更改一次如果事实并非如此，您能否解释一下，以便我可以更新答案
我猜它只是记录状态而不是更新
排除故障后你是对的。所以我不需要 if 语句，只需要 console.log(data) 和依赖数组中的数据。我不得不从 useEffect 中删除 getData() ，而是使用一个按钮来调用它。如果我在 useEffect 中运行 getData() 会导致无限循环
我很高兴它有帮助。 if 条件用于不必要的日志记录，我大部分时间只在数据可用时才获取日志。由你来添加它，因为它除了这个没有任何作用。

【解决方案2】：

const getData = async() => {
        const { results } = await (await fetch(url)).json()
        setData(results)
        console.log(data)
    }
    
    useEffect(() => {
        getData()
        console.log(data)
    },[])

useEffect 只执行一次，您看到console.log 两次只是因为getData 中的一个而useEffect 中的另一个

【讨论】：