为啥这会在我的控制台上打印两次？ [复制]

Posted 2023-02-22

【中文标题】为啥这会在我的控制台上打印两次？ [复制]

【英文标题】：Why is this printing twice to my console? [duplicate]为什么这会在我的控制台上打印两次？ [复制]

【发布时间】：2021-08-31 20:24:43

【问题描述】：

我在我的 React 应用程序中运行以下命令，当我在 Chrome 中打开控制台时，它会在控制台中打印 response.data[0] 两次。这是什么原因造成的？

const fetchData = async () => 
    return await axios.get(URL)
        .then((response) => 
            console.log(response.data[0]);
        );


import React from "react";
import Line from "react-chartjs-2";
import axios from "axios";

const URL = '';

// Fetch transaction data from api
const fetchData = async () => 
    return await axios.get(URL)
        .then((response) => 
            console.log('This is console: ' + response.data[0].day);
        );

这是我引用的 LineChart.js 文件的完整文件，因此您可以看到 fetchData 仅被调用一次。

const LineChart = () => 
    
        fetchData()
    
        return (
            <Line
                data=
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [
                        
                            label: '# of votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1,
                        
                    ]
                
    
                options=
                    scales: 
                        yAxes: [
                            
                                ticks: 
                                    beginAtZero: true,
                                
                            
                        ]
                    
                
            />
        )
    ;
    
    export default LineChart;

感谢大家的宝贵时间，我真的很感激。

【问题讨论】：

-> 尝试在控制台日志中添加前缀，例如 "This is console: "+console.log(response.data[0]); 。我相信谷歌浏览器开发者控制台也会在返回值时打印它们，所以如果只有一个语句有前缀，你就会知道。

你能确认fetchData 只被调用一次吗？

@kingkupps 是的，它只被调用一次。我将添加其余代码。

如果在 LineChart 函数中放一个控制台日志，是不是只打印一次？

@Richter 是的，它只打印一次。

【参考方案1】：

您已经在组件中包含了获取功能，因此每次渲染组件时都会触发它。您最好像这样在 useEffect 挂钩中包含获取数据：

const Component = () => 
  const [data, setData] = useState()
  
  useEffect(()=>
    fetch... then((data)=>setData(data))
  ,[])

【讨论】：

这成功了！谢谢。