Reactjs “无法修复”;设置状态(…):只能更新已安装或正在安装的组件;

Reactjs “无法修复”;设置状态(…):只能更新已安装或正在安装的组件;,reactjs,Reactjs,有人能告诉我这有什么问题吗: import React, { Component, PropTypes } from 'react'; class ExampleModal extends Component { static propTypes = { is_shown: PropTypes.bool } show = () => { console.log('The function gets called, but setS

有人能告诉我这有什么问题吗:

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;
import React,{Component,PropTypes}来自'React';
类ExampleModal扩展组件{
静态类型={
显示的是:PropTypes.bool
}
show=()=>{
log('调用函数,但setState失败');
this.setState({显示为:true});
}
render(){
返回(
按我
);
}
}
导出默认示例模式;

尝试过谷歌搜索、查阅文档和修改语法,但仍然没有解决方案。例如,可以通过导入上面的组件并将其放入主

中来复制,我相信您缺少
构造函数

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>
    );
}
构造函数(道具){
超级(道具);
此.state={
是否显示:错误
};
}
show(){
log('调用函数,但setState失败');
this.setState({显示为:true});
}
render(){
返回(
按我
);
}

为了使类方法的格式保持一致,我在
{this.show}
中添加了
.bind
,这使得
这个
指向
show()方法中的这个类。

事实证明,巴贝尔需要正确处理语法。不幸的是,Webpack或Babel在任何时候都没有显示错误消息。似乎插件顺序也很关键:如果我将转换插件放在热加载插件之后,问题仍然存在

如果其他人正在解决相同的问题,下面是修复该问题的.babelrc:

{
    "presets": ["stage-2", "react"],
    "env": {
        "development": {
            "plugins": [
                [
                    "transform-class-properties",
                    "react-hot-loader/babel"
                ]
            ]
        }
    }
}
当然,您还需要安装插件:

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

编辑:embarassing,但实际上这个“修复”问题的原因是因为数组中的输入错误,导致react热加载程序没有加载。因此,react hot loader是罪魁祸首,但我还没有弄清楚为什么…

您没有定义状态<代码>是显示的
prop
我认为这是不相关的。我试着注释propTypes,在构造函数下设置state,还有各种各样的技巧,但是没有任何帮助。我想知道这个问题是否是由我的应用程序设置引起的。这是可行的,但我的目标是让上述语法正常工作。刚才我发现了罪魁祸首-Babel配置中缺少transform类属性插件。谢谢,如果我评论//“react hot loader/Babel”,我也会遇到同样的问题,然后它就可以工作了,我想重新添加react hot loader,你成功了吗?