1

I am running the following in my React app and when I open the console in Chrome, it is printing the response.data[0] twice in the console. What is causing this?

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);
        }});
}

Here is the full file of the LineChart.js file that I am referencing so you can see that fetchData is only being called once.

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;

Thank you all for your time, I truly appreciate it.

DougM
  • 920
  • 1
  • 9
  • 21
  • 1
    -> try adding a pre-fix to the console log, such as `"This is console: "+console.log(response.data[0]);` . I believe google chrome developer console just prints values when they return as well, so if only one of the statements has the prefix, you will know. – StarshipladDev Jun 16 '21 at 02:12
  • Can you confirm `fetchData` is only being called once? – kingkupps Jun 16 '21 at 02:12
  • @kingkupps Yes, it is only being Called once. I'll add the rest of the code. – DougM Jun 16 '21 at 02:14
  • If you put a console log in the LineChart function, does that only print once? – richter Jun 16 '21 at 02:20
  • @Richter yes, it only prints once. – DougM Jun 16 '21 at 02:21
  • Try tossing a `debugger` statement in your `.then`. On the first pass, click through the "call stack" portion of the "sources" tab. Do the same on the second pass. See what's causing each invocation. Since it's React, maybe there's some weird state update thing causing the component to rerender. – Caleb Jay Jun 16 '21 at 02:25
  • This has the side effect of guaranteeing there's nothing up with chrome dev double-printing, and shows you that for sure for sure there's 2 invocations happening. You could also use the network tab to see if two requests are firing off, and see from whence they're firing. – Caleb Jay Jun 16 '21 at 02:26
  • @CalebJay Thank you so much! I will go ahead and do that here shortly. I appreciate your time. – DougM Jun 16 '21 at 02:28

1 Answers1

1

You have included fetching function in the component as it is, so it fires every time component being rendered. You better to include fetching data in useEffect hook just like this:

const Component = () => {
  const [data, setData] = useState({})
  
  useEffect(()=>{
    fetch... then(({data})=>setData(data))
  },[])
Tarukami
  • 1,160
  • 5
  • 8