React: не удается выполнить обновление состояния React на отключенном компоненте

Question

Я пытаюсь загрузить некоторые json данные в свое приложение React и внести некоторые изменения в данные перед их использованием (добавив еще один столбец с дополнительными данными в каждую строку набора данных), чтобы создать D3. js визуализация. Мне удалось заставить его работать и отображать в console.log, но, тем не менее, когда я начинаю вносить какие-либо изменения в свое приложение, появляется следующее окно с ошибкой:

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 codeandbox

Не могли бы вы сообщить мне, что я здесь делаю не так? Я новичок в React и программировании в целом, поэтому не понимаю, как решить эту проблему.

Заранее спасибо!

Answer 1

Если вы хотите использовать setState, вам необходимо убедиться, что компонент установлен. Вы можете использовать функцию componentDidMount и выполнять запрос извлечения внутри этой функции. https://en.reactjs.org/docs/react-component.html#componentdidmount

Не забудьте также прервать запрос при размонтировании компонента с помощью функции componentWillUnmount. https://en.reactjs.org/docs/react-component.html#componentwillunmount

Происходит то, что вы либо выполняете запрос на выборку, и он вызывает setState до того, как компонент будет смонтирован, ЛИБО вы выполняете запрос на выборку, и компонент был размонтирован до запрос на выборку завершен (или оба события выполняются)

Answer 2

вы не возвращаете данные из функции addQuarterStringsToArr, поэтому здесь setData(addQuarterStringsToArr(data)) будет неопределенным.

просто верните набор данных в функции addQuarterStringsToArr следующим образом:

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

надеюсь, что это сработает.

Answer 3

Вам необходимо сделать что-то похожее на это.

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;

, чтобы использовать это.

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

Я бы предпочел использовать useReducer, но в этом случае, поскольку вы запрос хуков. Вот мой лучший подход к тому, что вы сделали до сих пор.