React: Can't perform a React state update on an unmounted component

Konstantink1

I'm trying to load some json data into my React app and make some modification to the data before using it (adding one more column with additional data to each row of dataset) in order to create a D3.js visualization. I managed to get it working and displaying in console.log, but, however, whenever I'm starting to make any changes to my app the following window with an error pops up: enter image description here

I'm not sure why exactly this is happening. I tried to apply this modification helper function by adding one more 'await' to fetchUrl() function (something like await addQuarterStringsToArr(data)) or doing it with fetch API in the main component, but in all those cases I didn't get a desired dataset with an additional column.

Here is my codesandbox

Could you please let me know what am I doing wrong here? I'm quite new to React and programming in general, therefore I'm confused on how to resolve this issue.

Thank you in advance!

adel

you are not returning data from addQuarterStringsToArr function that why here setData(addQuarterStringsToArr(data)) going to be undefined.

just return dataset in addQuarterStringsToArr function like this:

// helper function to add corresponding text for the quarter and year as a string
export default function addQuarterStringsToArr(dataset) {
  for (let i = 0; i < dataset.length; i++) {
    switch (dataset[i][0].substring(5, 7)) {
      case "01":
      case "02":
      case "03":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q1");
        break;
      case "04":
      case "05":
      case "06":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q2");
        break;
      case "07":
      case "08":
      case "09":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q3");
        break;
      case "10":
      case "11":
      case "12":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q4");
        break;
      default:
        break;
    }
  }
  return dataset;
}

hope this do the work.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React Can't perform a React state update on an unmounted component error

Can't perform a React state update on an unmounted component in react

React - Can't perform a React state update on an unmounted component

React Spring "Can't perform a React state update on an unmounted component"

Can't perform a React state update on an unmounted component theme provider

can't perform a react state update on an unmounted component issue with useEffect

useEffect - Can't perform a React state update on an unmounted component

React can't perform state update on unmounted component

Can't perform a React state update on an unmounted component in reactjs

Can't perform a React state update on an unmounted component

Can't perform a React State update on unMounted child component?

Getting Warning: Can't perform a React state update on an unmounted component

Can't perform a react state update on an unmounted component error

Warning: Can't perform a React state update on an unmounted component

React form submit and "can't perform state update on an unmounted component"?

ReactJS & Redux: Can't perform a React state update on an unmounted component

Can't perform a React state update on an unmounted component?

Fix "Can't perform a React state update on an unmounted component" error

ReactJS : Can't perform a React state update on an unmounted component

arning: Can't perform a react state update on an unmounted component

Can't perform a React state update on an unmounted component useEffect error

Can't perform a React state update on an` unmounted` component

React testing library: An update inside a test was not wrapped in act(...) & Can't perform a React state update on an unmounted component

Can't perform a React state update on an unmounted component, using class component and component did mount

React Native - Can't perform a React state update on an unmounted component, useEffect cleanup function

React useEffect causing: Can't perform a React state update on an unmounted component

React-hooks. Can't perform a React state update on an unmounted component

React-Native: Warning: Can't perform a React state update on an unmounted component

Can't perform a React state update on an unmounted component in React js and firestore