Javascript 无法读取属性'；价值'；未定义的反应 import React，{Component}来自“React”； 类计数器扩展组件{ render（）{ 这个。schimbarecloare（）； //React.createElement（“div”）； 返回( {this.props.children} {this.formatCount（）} this.props.onIncrement（this.props.counter）} className=“btn btn主btn sm” > {" "} 递增值为{“”} this.props.onDelete（this.props.id）} className=“按钮btn btn危险btn sm-2” > 斯特耶 ); } 希姆巴雷{ let classes=“badge m-2 badge-”； classes+=this.props.counter.value==0？“警告”：“主要”； 返回类； } formatCount（）{ const{value}=this.props.counter； 返回值===0？“零”：值； } } 导出默认计数器；

所以我有错误代码“TypeError:无法读取未定义的属性'value' 反希姆巴雷 C:/Users/Alex/counter-app2/src/components/counter.jsx:31”。 第31行是

classes+=this.props.counter.value==0？“警告”：“主要”schimbarecloare

功能中的code>

---

这是否与国家是一个地方财产而道具是全球财产这一事实有关？在这段时间里，我学会了如何做出反应，我不知道到底需要对这个演示进行哪些更改，关于如何处理来自家长计数器的道具。希望对你有帮助

import React, { Component } from "react";

class Counter extends Component {
  render() {
    this.schimbareCuloare();

    //React.createElement("div");
    return (
      <div>
        {this.props.children}
        <span className={this.schimbareCuloare()}>{this.formatCount()}</span>
        <button
          onClick={() => this.props.onIncrement(this.props.counter)}
          className="btn btn-primary btn-sm"
        >
          {" "}
          Incrementare{" "}
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="button btn btn-danger btn-sm m-2"
        >
          Sterge
        </button>
      </div>
    );
  }

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

  formatCount() {
    const { value } = this.props.counter;
    return value === 0 ? "Zero" : value;
  }
}

export default Counter;

类计数器扩展组件{
render（）{
这个。schimbarecloare（）；
//React.createElement（“div”）；
返回(
{this.props.children}
{this.formatCount（）}
this.props.onIncrement（this.props.counter）}
className=“btn btn主btn sm”
>
{" "}
递增值为{“”}
this.props.onDelete（this.props.id）}
className=“按钮btn btn危险btn sm-2”
>
斯特耶
);
}
希姆巴雷{
let classes=“badge m-2 badge-”；
classes+=this.props.counter.value==0？“警告”：“主要”；
返回类；
}
formatCount（）{
const{value}=this.props.counter；
返回值===0？“零”：值；
}
}
类计数器扩展组件{
状态={
计数器：[
{id:1，值：5}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}
]
};
handleDelete=计数器ID=>{
const counters=this.state.counters.filter（c=>c.id==
抗逆性）；
this.setState（{counters}）；
};
handleReset=（）=>{
const counters=this.state.counters.map（c=>{
c、 数值=0；
返回c；
});
this.setState（{counters}）；
};
handleIncrement=计数器=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[index]。值=计数器[index]。值+1；
this.setState（{counters}）；
};
render（）{
返回(
重置
{this.state.counters.map（counter=>(
))}
);
}
}

能否显示计数器的父组件？错误消息显示它出现在第31行。如果您在使用计数器组件时说这是传递任何道具的哪一行，可能会有所帮助？@A_A第31行是第一次在代码中调用this.props….31行是this classes+=this.props.Counter.value==0？“警告”：“主要”；

class Counter extends Component {
    render() {
        this.schimbareCuloare();

        //React.createElement("div");
        return (
            <div>
                {this.props.children}
                <span className={this.schimbareCuloare()}>{this.formatCount()}</span>
                <button
                    onClick={() => this.props.onIncrement(this.props.counter)}
                    className="btn btn-primary btn-sm"
                >
                    {" "}
                    Incrementare{" "}
                </button>
                <button
                    onClick={() => this.props.onDelete(this.props.id)}
                    className="button btn btn-danger btn-sm m-2"
                >
                    Sterge
                </button>
            </div>
        );
    }

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

    formatCount() {
        const { value } = this.props.counter;
        return value === 0 ? "Zero" : value;
    }
}


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

    handleDelete = counterId => {
        const counters = this.state.counters.filter(c => c.id !==
            counterId);
        this.setState({ counters });
    };

    handleReset = () => {
        const counters = this.state.counters.map(c => {
            c.value = 0;
            return c;
        });
        this.setState ({ counters });
    };

    handleIncrement = counter => {
        const counters = [...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index].value = counters[index].value+ 1;
        this.setState({ counters });
    };

    render() {
        return (
            <div>
                <button
                    onClick={this.handleReset}
                    className="btn btn-primary btn-sm m-2"
                >
                    Reset
                </button>

                {this.state.counters.map(counter => (
                    <Counter
                        id={counter.id}
                        onDelete={this.handleDelete}
                        counter={counter}
                        onIncrement={this.handleIncrement}
                    />
                ))}
            </div>
        );
    }
}