Обновление состояния в компоненте React, вызывающее его размонтирование

Не используйте useEffect в качестве обработчика, используйте хуки useEffect для инициализации. Вместо использования/установки innerHtml пусть реакция сделает это за вас. Я предполагаю, что вы где-то определили myDataFetch, и я не вижу, чтобы ваша выборка данных использовала этот тип.

В любом случае, попробуйте использовать модифицированный код ниже.

   import * as React from 'react';

const MyComponent = (props) => {
  const [documentType, setDocumentType] = React.useState('alpha');
  const [documentData, setDocumentData] = React.useState('');
  const types = ['alpha', 'beta', 'gamma'];

  const fetchData = async () => {
    const response = await myDataFetch('https://example.com/foo/?bar=123')
    const data = await response.json();
    setDocumentData(data);
  }

  React.useEffect(() => {
    fetchData();
  }, []);

  const switchDocumentType = async (e, type) => {
    e.preventDefault();
    setDocumentType(type);
    await fetchData();
    // send some analytics events
  };

  return (
    <div className = "container-div">
      {types.map((type) => {
        return (
          <button key = {type} onClick = {(e) => switchDocumentType(e, type)}>
            {type}
          </button>
        );
      })}
      <div id = "special-div">{documentData}</div>
    </div>
  );
};

export default MyComponent;

Вы не должны редактировать DOM напрямую. В React есть два DOM: виртуальный DOM и реальный DOM. Рендеринг может быть немного привередливым, если вы решите отредактировать настоящий DOM.

Вы можете безопасно разбирать html, используя html-react-parser . Это лучший способ сделать это, потому что он становится частью дерева реагирования, тогда как опасноSetInnerHTML заменит весь HTML, чтобы сбросить изменения в DOM. С согласованием это может привести к экспоненциальному увеличению времени загрузки.

Это также будет дезинфицировать ваши входы, вы знаете... для безопасности. :)

import parse from 'html-react-parser';

const SpecialDiv = ({html}) => {
   const reactElement = parse(html);
   return reactElement
}

Если вы решили, что должны использовать dangerouslySetInnerHTML, вы можете сделать это так:

const [someHTML, setSomeHTML] = useState(null)

const someFunction = async() => {
   const response = await getData();
   const data = await response.json();

   setSomeHTML(data);
}

return( 
   <div>
      {someHTML && <div dangerouslySetInnerHTML = {{__html: someHTML}} id = "special-div"/>}
   </div>
)

При этом я бы сказал, что, позволяя это, вы открываете себя для возможности XSS-атаки без надлежащего разбора и очистки ваших входных данных.

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

Кроме того, теперь я возвращаю функцию очистки внутри useEffect, как указано в некоторых сообщениях о переполнении стека. Я также провел рефакторинг кода, предложенный @iaq и @sheepiiHD, чтобы следовать рекомендациям React.

Обновленный код:

import * as React from 'react';

const MyComponent = (props) => {
  const [documentType, setDocumentType] = React.useState('alpha');
  const [documentData, setDocumentData] = React.useState('');
  const types = ['alpha', 'beta', 'gamma'];

  const fetchData = async () => {
    const response = await myDataFetch('https://example.com/foo/?bar=123')
    const data = await response.json();
    setDocumentData(data);
  }

  React.useEffect(() => {
    fetchData();
    return () => {
      setDocumentType('');
      setDocumentData('');
    };
  }, []);

  const switchDocumentType = async (e, type) => {
    e.preventDefault();
    setDocumentType(type);
    await fetchData();
    // send some analytics events
  };

  return (
    <div className = "container-div">
      {types.map((type) => {
        return (
          <button key = {type} onClick = {(e) => switchDocumentType(e, type)}>
            {type}
          </button>
        );
      })}
      <div id = "special-div" dangerouslySetInnerHTML = {{__html: documentData.terms}} />
    </div>
  );
};

export default MyComponent;