React：无法在未安装的组件上执行 React state 更新

Question

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:

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!

Answer 1

If you want to use setState , you need to be sure the component is mounted. You can use the componentDidMount function and do the fetch request inside that function. https://en.reactjs.org/docs/react-component.html#componentdidmount

Remember to also abort the request when the component is unmounted using the componentWillUnmount function. https://en.reactjs.org/docs/react-component.html#componentwillunmount

What's happening is that you are either doing the fetch request and it calls setState before the component is mounted OR you do the fetch request and the component was unmounted before the fetch request finished (or both things happening)

Answer 2

You need to do something similar to this.

import { useEffect, useState } from 'react';


const useFetch = (url) => {
    const [response, setResponse] = useState(null);
    const [loading, setLoading] = useState(false);
    const [hasError, setHasError] = useState(false);

    useEffect(() => {
        setLoading(true);
        fetch(
            url,{
            method: 'GET',
        }).then(res => {
            setResponse(res);
            setLoading(false);
        })
        .catch(() => {
            setHasError(true);
            setLoading(false);
        });
    }, [url]);
    return [response, loading, hasError];
};
export default useFetch;

to make use of this.

import { useEffect, useState } from 'react';
const component = () => {
     const [response, loading, hasError] = useFetch('http://myurl.com/api/post');

useEffect(() => {
    if(response !== null){ 
      console.log(response);
    }
});

   return <>
     {loading && <span>loading</span> }
     {hasError && <span>Some error!!!</span>} 
     <div> {JSON.stringify(response)} </div>
   </>;
}

I would rather use a useReducer but in this case since, you are requesting Hooks. Here is my better approach to what you've done so far.

Answer 3

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.