Reactjs React js-Uncaught TypeError:无法读取未定义的属性

我有个问题( 以下是我的组件：

class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            total: 0
        };
        this.totalFuns = this.totalFuns.bind(this);
    }

    totalFuns(event){

        this.setState({total: event})
    }

    render() {

        return (
            <main>
                <Item data_items={data} data_cnt={this.totalFuns} />
            </main>
        );
    }
}

export default Main;

类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
总数：0
};
this.totalFuns=this.totalFuns.bind（this）；
}
totalFuns（活动）{
this.setState（{total:event}）
}
render（）{
返回(
);
}
}
导出默认主；

然后是项目组件：

class Item extends Component {
    constructor(props){
        super(props);
        this.skuChange = this.skuChange.bind(this);
    }

    skuChange(event) {

        this.props.data_cnt(event)

    }

    render() {

        return (
            <section className="item" data-index={this.props.data_index}>
                <Select values={this.props.data_items} onChange={this.skuChange}/>
            </section>
        );
    }
}

export default Item;

类项扩展组件{
建造师（道具）{
超级（道具）；
this.skuChange=this.skuChange.bind（this）；
}
更改（事件）{
此.props.data_cnt（事件）
}
render（）{
返回(
);
}
}
导出默认项；

然后选择组件

class Select extends Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.props.onChange(event.target.value);
        this.setState({value: event.target.label});
    }

    render() {

        var options = this.props.values;

        var options_list = options.map(function(obj,i){

            return (
                <option value={i} key={i} label={obj.label} />
            )
        });

        return (
            <select value={this.state.value} onChange={this.handleChange}>
                {options_list}
            </select>

        );
    }
}

export default Select;

class选择扩展组件{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.props.onChange（event.target.value）；
this.setState（{value:event.target.label}）；
}
render（）{
var options=this.props.values；
var options_list=options.map（函数（obj，i）{
返回(
)
});
返回(
{选项列表}
);
}
}
导出默认选择；

在控制台中显示：未捕获类型错误：无法读取未定义的属性“totalFuns”。如果没有此乐趣，我的应用程序工作正常(

---

为什么？

您的函数实际上被称为

totalFuns

，但您有

totalFun

所以这一行：

应该是

---

在您的选择组件中，状态

值最初未定义，因此出现错误。此外，可以根据值而不是标签来选择选项。请参阅下面的工作片段。另外，我没有看到
主组件中存在数据

class Select extends Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.props.onChange(event.target.value);
        this.setState({value: event.target.label});
    }

    render() {

        var options = this.props.values;

        var options_list = options.map(function(obj,i){

            return (
                <option value={i} key={i} label={obj.label} />
            )
        });

        return (
            <select value={this.state.value} onChange={this.handleChange}>
                {options_list}
            </select>

        );
    }
}

export default Select;


类主扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
总数：0
};
this.totalFuns=this.totalFuns.bind（this）；
}
totalFuns（活动）{
console.log（事件）；
this.setState（{total:event}）
}
render（）{
变量数据=[{label:1}，{label:2}]
返回(
);
}
}
类项扩展了React.Component{
建造师（道具）{
超级（道具）；
this.skuChange=this.skuChange.bind（this）；
}
更改（事件）{
此.props.data_cnt（事件）
}
render（）{
返回(
);
}
}
类选择扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.props.onChange（event.target.value）；
this.setState（{value:event.target.value}）；
}
render（）{
var options=this.props.values；
var options_list=options.map（函数（obj，i）{
返回(
)
});
返回(
{选项列表}
);
}
} 
ReactDOM.render（，document.getElementById（'app'）；

抱歉..这是我的回答..在我的代码中都很好..随处可见totalFuns..和控制台错误：无法读取未定义的属性'totalFuns'，导致该错误的是哪一行引用？您能将代码放在代码笔或snipet中吗？这样会更容易帮助您