时间戳

首页 > 解决方案 > 反应“this.props”返回未定义

reactjs - 反应“this.props”返回未定义

问题描述

我正在学习关于 CodewithMosh 的课程，在课程中我在点击时启动了一个函数，然后这个函数将一个 ID 传递给另一个组件。这将返回未定义。我尝试传递一个不同的值，它工作得非常好。我不明白有什么问题或区别。

class Counters extends Component {
    state = { 
        counters: [
            {id: 1, value: 4},
            {id: 2, value: 1},
            {id: 3, value: 2},
            {id: 4, value: 3}
        ]
     };

    handleDelete = (counterId) => {
        console.log('Event Handler Called', counterId); //Function receiving data
    };


    render() { 
        return ( 
            <div className="main">
                { this.state.counters.map(counter => 
                <Counter key={counter.id} onDelete={this.handleDelete} value={counter.value}>
                    <h4>Counter #{counter.id}</h4>
                </Counter>)}
            </div>
         );
    }

class Counter extends Component {
    state = {
        value: this.props.value
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += (this.state.value === 0) ? "warning" : "primary";
        return classes;
    }

    formatCount(){
        const {value: count} = this.state;
        return count === 0 ? 'Zero' : count;
    }

    handleIncrement = () => {
        this.setState({value: this.state.value + 1});
    }

    render() { 
        return (
        <div>
            {this.props.children}
            <span style={this.styles} className={this.getBadgeClasses()}>{this.formatCount()}</span>
            <button onClick={this.handleIncrement } className={"btn btn-secondary btn-sm"}>Increment</button>
            <button 
                onClick={() => this.props.onDelete(this.props.id)} //The ID I'm trying to pass.
                className={'btn btn-danger btn-sm m-2'}>
                    Delete
            </button>
        </div>
        );
    }

标签： reactjs

解决方案

您还没有在 Counter 组件中调用构造函数 render 方法，并且还向它传递了 props。做这个;

class Counter extends Component {
constructor(props){
    super(props);

    this.state = {
        value: this.props.value
    };
}

getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += (this.state.value === 0) ? "warning" : "primary";
    return classes;
}

formatCount(){
    const {value: count} = this.state;
    return count === 0 ? 'Zero' : count;
}

handleIncrement = () => {
    this.setState({value: this.state.value + 1});
}

render() { 
    return (
    <div>
        {this.props.children}
        <span style={this.styles} className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button onClick={this.handleIncrement } className={"btn btn-secondary btn-sm"}>Increment</button>
        <button 
            onClick={() => this.props.onDelete(this.props.id)} //The ID I'm trying to pass.
            className={'btn btn-danger btn-sm m-2'}>
                Delete
        </button>
    </div>
    );
}

推荐阅读