title: Calling function to fetch data repeatedly is giving overlapping responses despite trying to use promises
body: <p>I have a function that takes a url and data, gets json from an API, creates an object with data in it and returns it. I'm trying to call this function to get different data with different urls, but the responses are overlapping.</p>
  
  <p>I've tried a bunch of different ways to save the data but the answers all come back the same. Here are some examples of what I've tried.</p>
  
  <pre><code>//Get Metals Data
  const platListData = getListData(platListURL, this.state.lineChartData, months);
  const pallListData = getListData(pallListURL, this.state.lineChartData, months);
  const rhodListData = getListData(rhodListURL, this.state.lineChartData, months);
  
  Promise.all([ platListData, pallListData, rhodListData ]).then((responses) =&gt; {
    console.log(responses)
      this.setState({
          platListData: responses[0],
          pallListData: responses[1],
          rhodListData: responses[2],
          isLoading: false,
      });
  });
  </code></pre>
  
  <p>The code above returns the same response to all 3, which response it gets is random, sometimes its from the first url, sometimes second or third.</p>
  
  <pre><code>getAllLists(platListURL, pallListURL, rhodListURL, this.state.lineChartData, months)
    .then(([platListData, pallListData, rhodListData]) =&gt; {
      console.log(platListData, pallListData, rhodListData);
    })
  </code></pre>
  
  <p>The code above calls the function below, which tries to fetch them from the main function with all the code that handles the json and creates the object with the data I need.</p>
  
  <p>export function getAllLists(url, url2, url3, data, months){
    return Promise.all([getListData(url, data, months), getListData(url2, data, months), getListData(url3, data, months)])
  }</p>
  
  <p>And lastly I've tried the code below:</p>
  
  <pre><code>getListData(platListURL, this.state.lineChartData, months)
  .then((response) =&gt; {
    console.log("response1")
    console.log(response)
    this.setState({
      platListData: response,
    })
  }).then(() =&gt; {
    getListData(platListURL, this.state.lineChartData, months)
    .then((response) =&gt; {
      console.log("response2")
      console.log(response)
      this.setState({
        pallListData: response,
        isLoading: false
      })
    })
  })
  </code></pre>
  
  <p>I've tried a bunch of other stuff, but they all give the same three responses back, which response is sometimes random too.</p>
  
  <p>Don't know if it makes a difference but I'm calling from the function after importing it:</p>
  
  <pre><code>import { getListData, getAllLists, getMonth, getDaysInMonth } from './assets/chartData.js'
  </code></pre>
  
  <p>An example of the overlapping responses I'm talking about can be seen below:</p>
  
  <pre><code>               [ { labels: [ 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep' ],
                 │ datasets:
                 │ [ { data: [ 882, 809, 805, 863, 868, 947 ],
                 │ color: [Function: color] } ] },
  
                 │ { labels: [ 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep' ],
                 │ datasets:
                 │ [ { data: [ 882, 809, 805, 863, 868, 947 ],
                 │ color: [Function: color] } ] },
  
                 │ { labels: [ 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep' ],
                 │ datasets:
                 │ [ { data: [ 882, 809, 805, 863, 868, 947 ],
                 └ color: [Function: color] } ] } ]
  </code></pre>
  
  <p>Sorry about the weird format, I copied it from a console log in my cmd.</p>
  
  <p>I don't really know what else to try, I just want them each to get their own responses instead of overlapping or whatever may be happening.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p>Thanks in advance.</p>