React js - Uncaught TypeError：无法读取undefined的属性

Question

我有问题（ 有我的组件：

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;

然后是项目组件：

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;

然后选择组件

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;

在控制台显示中：未捕获的TypeError：无法读取未定义的属性“totalFuns”。没有这个乐趣，我的应用程序工作正确..（

为什么？

Answer 1

您的功能实际上是totalFuns，但您有totalFun。

所以这一行：

<Item data_items={data} data_cnt={this.totalFun} />

应该是

<Item data_items={data} data_cnt={this.totalFuns} />

Answer 2

在Select组件中，状态value最初未定义，因此您收到错误。此外，可以基于值而不是标签来选择选项。请参阅下面的工作代码段。此外，我看不到Main组件中存在数据

＆＃13;

＆＃13;

class Main extends React.Component {

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

    totalFuns(event){
        console.log(event);
        this.setState({total: event})
    }

    render() {
        var data = [{label: 1}, {label: 2}]
        return (
            <main>
                <Item data_items={data} data_cnt={this.totalFuns} />
            </main>
        );
    }
}


class Item extends React.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>
        );
    }
}


class Select extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        }
        this.handleChange = this.handleChange.bind(this);
    }

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

    render() {

        var options = this.props.values;

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

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

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

        );
    }
} 

ReactDOM.render(<Main/>, document.getElementById('app')); 

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;