为什么收到此错误“ TypeError：无法读取未定义的属性'值'”

Question

这是我的代码，类计数器正在调用类计数器。 我正在尝试遵循youtube教程： Tutotial 1:24:00。

这是我的代码：

import React, { Component } from 'react';
import Counter from './counter';

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


    render() { 
        return (  
            <div>
                { this.state.counters.map(counter => 
                <Counter key={counter.id} value={counter.value} selected={true}/>)} 
            </div>
        );
    }
}

export default Counters;

和

import React, { Component } from 'react';


class Counter extends Component {

    state = {  
        count: this.props.value,
        tags: ['tag1', 'tag2', 'tag3']
    };

    constructor() {
        super();
    } 

    handleIncrement = product => {
        console.log(product);
        this.setState({ count : this.state.count + 1})
    }

    handleDecrement = () => {
        this.setState({ count : this.state.count - 1})
    }

    render() { 

        console.log('props', this.props);

        return (
            <div>
                <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                <button onClick={() => this.handleIncrement({id:1})} className="btn btn-secondary btn-sm m-2">Increment</button>
                <button onClick={this.handleDecrement} className="btn btn-secondary btn-sm m-2">Decrement</button>
            </div>
          );
    }

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

    formatCount() {
        const { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}


export default Counter;

但是我收到以下错误

Answer 1

您需要执行以下两项操作之一来解决此问题：

• 删除Counter的构造函数
• 将props参数添加到构造函数中，并将其传递给super

对于第二个选项，您的构造函数将如下所示：

constructor(props) {
    super(props);
}

但是删除构造函数具有相同的效果。

Answer 2

之所以会发生这种情况，是因为您尝试初始化状态时，实际上并没有映射道具。

可以通过在构造函数中初始化状态来轻松避免这种情况。

constructor(props) {
    super(props);
    this.state = {  
        count: props.value,
        tags: ['tag1', 'tag2', 'tag3']
    };
}