setState (…): Може оновити лише змонтований або монтажний компонент. Зазвичай це означає, що ви викликали setState () для немонтованого компонента. Це не-операція

componentDidMount(prevProps, prevState, prevContext) {
    let [audioNode, songLen] = [this.refs.audio, List.length-1];

    audioNode.addEventListener('ended', () => {
        this._endedPlay(songLen, () => {
            this._currSong(this.state.songIndex);
            this._Play(audioNode);
        });
    });

    audioNode.addEventListener('timeupdate', () => {
        let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = [];

        if(!isNaN(audioNode.duration)) {
            remainTime = audioNode.duration - audioNode.currentTime;
            remainTimeMin = parseInt(remainTime/60);  // 剩余分
            remainTimeSec = parseInt(remainTime%60);  // 剩余秒

            if(remainTimeSec < 10) {
                remainTimeSec = '0'+remainTimeSec;
            }
            remainTimeInfo = remainTimeMin + ':' + remainTimeSec;
            this.setState({'time': remainTimeInfo});
        }
    });
}

componentWillUnmount () {
    let audio = this.refs.audio;
    audio.removeEventListener('timeupdate');
    audio.removeEventListener('ended');
}

Помилка:

Попередження: setState (...): Може оновлювати лише змонтований або монтажний компонент. Зазвичай це означає, що ви викликали setState () для немонтованого компонента. Це не-операція. Перевірте код для невизначеного компонента.

Я видаляюEventListener "закінчився" в componentWillUnmount, але він не працює. тому що я додаю this.setState({'time': remainTimeInfo});в componentDidMount.

Я вирішив це шляхом присвоєння реф до компоненту , а потім перевірка , якщо арбітр існує до установки стану:

myMethod(){
  if (this.refs.myRef) 
   this.setState({myVar: true});
}

render() {
  return (
    <div ref="myRef">
      {this.state.myVar}
    </div>
  );
}

І останнім часом, оскільки я використовую переважно функціональні компоненти, я використовую такий шаблон:

const Component = () => {
  const ref = React.useRef(null);
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setTimeout(() => { // usually fetching API data here
      if (ref.current !== null) {
        setCount((count) => count + 1);
      }
    }, 100);
  };

  return (
    <button onClick={increment} ref={ref}>
      Async Increment {count}
    </button>
  );
};

removeEventListenerмає той самий підпис, що і addEventListener. Усі аргументи повинні бути абсолютно однаковими, щоб видалити слухача.

var onEnded = () => {};
audioNode.addEventListener('ended', onEnded, false);

this.cleanup = () => {
  audioNode.removeEventListener('ended', onEnded, false);
}

А у дзвінку componentWillUnmount this.cleanup().

Я зіткнувся з цією проблемою, тому що використовував setStateзамість stateконструктора.

ПРИКЛАД

Змініть такий неправильний код

constructor(props) {
  super(props);
  this.setState({
    key: ''
  });
}

до

constructor(props) {
  super(props);
  this.state = {
    key: ''
  }; 
}

Редагувати : isMountedзастаріло і, можливо, буде видалено в пізніших версіях React. Дивіться це і це, isMount - це Антипаттерн .

Як зазначається в попередженні, ви викликаєте this.setStateкомпонент, який був змонтований, але з тих пір відключений.

Щоб переконатися, що ваш код у безпеці, ви можете обернути його

if (this.isMounted()) {
    this.setState({'time': remainTimeInfo});
}

щоб компонент все ще був змонтований.

Я зіткнувся з такою ж проблемою, оскільки оновив останню версію для реагування. Вирішено як нижче.

Мій код був

async componentDidMount() {
  const { default: Component } = await importComponent();
  Nprogress.done();
  this.setState({
    component: <Component {...this.props} />
  });
}

Змінено на

componentWillUnmount() {
  this.mounted = false;
}
async componentDidMount() {
  this.mounted = true;
  const { default: Component } = await importComponent();
  if (this.mounted) {
    this.setState({
      component: <Component {...this.props} />
    });
  }
}

Я мав цю проблему раніше, і вирішив її згідно з офіційною сторінкою React isMount is Antipattern .

Встановіть isMountedпрапорець властивості, який має значення true componentDidMount, і перемкніть його false componentWillUnmount. Коли ви будете setState()у зворотних викликах, isMountedспочатку перевірте ! Це працює для мене.

state = {
    isMounted: false
  }
  componentDidMount() {
      this.setState({isMounted: true})
  }
  componentWillUnmount(){
      this.setState({isMounted: false})
  }

зворотний дзвінок:

if (this.state.isMounted) {
 this.setState({'time': remainTimeInfo});}

Багато відповідей у ​​цій темі мають сенс використання посилань, але я думаю, що повний приклад був би непоганим. Оскільки ви оперуєте фактичним вузлом DOM, використовуючи прослуховувач подій і виходячи з контексту React, посилання слід вважати стандартним рішенням. Ось повний приклад:

class someComponent extends Component {
  constructor(props) {
    super(props)
    this.node = null
  }
  render() {
    return (
      <div ref={node => { this.node = node }}>Content</div>
    )
  }
  handleEvent(event) {
    if (this.node) {
      this.setState({...})
    }
  }
  componentDidMount() {
    //as soon as render completes, the node will be registered.
    const handleEvent = this.handleEvent.bind(this)
    this.node.addEventListener('click', handleEvent)
  }
  componentWillUnmount() {
    const handleEvent = this.handleEvent.bind(this)
    this.node.removeEventListener('click', handleEvent)
  }
}

addEventListener і removeEventListener ， Зворотний дзвінок не повинен бути анонімним внутрішнім класом, і вони повинні мати однакові параметри

Я отримував це попередження, коли хотів показати спливаюче вікно (модальний спосіб завантаження) про зворотний виклик успіху / відмови запиту Ajax. Крім того, setState не працював, і мій спливаючий модальний не відображався.

Нижче була моя ситуація-

<Component /> (Containing my Ajax function)
    <ChildComponent />
        <GrandChildComponent /> (Containing my PopupModal, onSuccess callback)

Я викликав функцію ajax компонента з компонента онука, передаючи зворотний виклик onSuccess (визначений у компоненті онука), який встановлював стан для відображення спливаючого модаля.

Я змінив його на -

<Component /> (Containing my Ajax function, PopupModal)
    <ChildComponent />
        <GrandChildComponent /> 

Натомість я зателефонував setState (onSuccess Callback), щоб показати спливаючий модальний компонент у самому компоненті (ajax callback) та вирішити проблему.

У другому випадку: компонент відображався двічі (я двічі включав bundle.js у html).

Назвівши метод замість анонімної функції у audioNode.addEventListenerзворотному виклику, слід виключити тематичне попередження:

    componentDidMount(prevProps, prevState, prevContext) {
    let [audioNode, songLen] = [this.refs.audio, List.length-1];

    audioNode.addEventListener('ended', () => {
        this._endedPlay(songLen, () => {
            this._currSong(this.state.songIndex);
            this._Play(audioNode);
        });
    });

    audioNode.addEventListener('timeupdate', this.callbackMethod );
}

callBackMethod = () => {
    let [remainTime, remainTimeMin, remainTimeSec, remainTimeInfo] = [];

    if(!isNaN(audioNode.duration)) {
        remainTime = audioNode.duration - audioNode.currentTime;
        remainTimeMin = parseInt(remainTime/60);  // 剩余分
        remainTimeSec = parseInt(remainTime%60);  // 剩余秒

        if(remainTimeSec < 10) {
            remainTimeSec = '0'+remainTimeSec;
        }
        remainTimeInfo = remainTimeMin + ':' + remainTimeSec;
        this.setState({'time': remainTimeInfo});
    }
}

І так, іменований метод потрібен у будь-якому випадку, оскільки removeEventListenerне працюватиме з анонімними зворотними викликами, як уже згадувалося вище кілька разів.

1. Скасувати всі операції асинхронізації в componentWillUnmount
2. Компонент перевірки вже демонтується під час асинхронного виклику setState,
   оскільки прапор isMount застарілий