Невозможно исправить «SetState (...): Можно только обновить установленный или монтажный компонент»

Question

Может кто-нибудь сказать мне, что случилось с этим:

import React, { Component, PropTypes } from 'react'; 

class ExampleModal extends Component { 
    static propTypes = { 
     is_shown: PropTypes.bool 
    } 

    show =() => { 
     console.log('The function gets called, but setState fails'); 
     this.setState({ is_shown: true }); 
    } 

    render() { 
     return (
      <button onClick={this.show}>Press me</button> 
     ); 
    } 
} 

export default ExampleModal; 

Пробовал прибегая к помощи, проходящий через документацию, а также изменения синтаксиса , но до сих пор нет решения. Может быть воспроизведен, например, с помощью this example app путем импорта компонента выше и помещения его в основной номер <div>.

Answer 1

Вам не хватало constructor Я верю.

constructor(props) { 
    super(props); 
    this.state = { 
     is_shown: false 
    }; 
} 

show() { 
    console.log('The function gets called, but setState fails'); 
    this.setState({ is_shown: true }); 
} 

render() { 
    return (
     <button onClick={this.show.bind(this)}>Press me</button> 
    ); 
} 

Для того, чтобы ваш формат метода класса последователен, я добавил .bind в {this.show}, что делает this точку к этому классу в show() методе.

Answer 2

Оказалось, что для правильной обработки синтаксиса Babel необходим transform-class-properties plugin. К сожалению, ни одно сообщение об ошибке не было показано в любой точке Webpack или Babel. Похоже, что упорядочение плагинов также имеет решающее значение: если я поместил плагин преобразования после плагина hot loader, проблема не исчезнет.

В случае, если кто-то борется с той же проблемой, вот .babelrc, что устранило проблему:

{ 
    "presets": ["stage-2", "react"], 
    "env": { 
     "development": { 
      "plugins": [ 
       [ 
        "transform-class-properties", 
        "react-hot-loader/babel" 
       ] 
      ] 
     } 
    } 
} 

Естественно, вам также необходимо установить плагин:

npm install --save-dev babel-plugin-transform-class-properties 

EDIT: смущаясь, но на самом деле причина, по которой эта «исправленная» проблема была вызвана опечаткой в ​​массиве, что привело к тому, что реактор с горячей загрузкой не загружался. Следовательно, реакция-hot-loader является виновником, но мне еще предстоит выяснить, почему ...