Reactjs 每当我将id从孩子发送给家长时，我都会变得不明确，我可以知道我遗漏了什么吗？

尝试将id属性从计数器发送到计数器，以便删除相应的React元素。 *在counters组件的handleDelete中，我试图查看counterid，但是得到了一个未定义的响应，我可以得到一些帮助来了解它为什么未定义，我认为在这里可以得到1,2,3,4,5

counter.jsx

import React, { Component } from "react";

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

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

  render() {
    return (
      <div>
        <span 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)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

  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;
  }
}

export default Counter;

import React，{Component}来自“React”；
类计数器扩展组件{
状态={
value:this.props.value，
};
handleIncrement=（）=>{
this.setState（{value:this.state.value+1}）；
};
render（）{
返回(
{this.formatCount（）}
增量
this.props.onDelete（this.props.id）}
className=“btn btn危险btn sm-2”
>
删除
);
}
getBadgeClasses（）{
let classes=“badge m-2 badge-”；
classes+=this.state.value==0？“警告”：“主要”；
返回类；
}
formatCount（）{
const{value:count}=this.state；
返回计数===0？“零”：计数；
}
}
导出默认计数器；

counters.jsx

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

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

  handleDelete = (counterId) => {
    console.log("Event Handler Called", counterId);
  };

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

export default Counters;

import React，{Component}来自“React”；
从“/Counter”导入计数器；
类计数器扩展组件{
状态={
计数器：[
{id:1，值：0}，
{id:2，值：4}，
{id:3，value:3}，
{id:4，值：2}，
{id:5，value:15}，
],
};
handleDelete=（计数器ID）=>{
log（“调用的事件处理程序”，计数器ID）；
};
render（）{
返回(
{this.state.counters.map（（counter）=>(
))}
);
}
}
导出默认计数器；

您没有将任何

id

传递给

计数器

组件。

键

属性仅用于通过应用程序识别组件，避免在多次调用同一组件时发生冲突

您需要做的是向

Counters.jsx中的
Counter
组件发送
id
道具：

this.state.counters.map((counter) => (
  <Counter
    key={counter.id}
    onDelete={this.handleDelete}
    value={counter.value}
    id={counter.id}  // HERE: send an id prop to your component
  ></Counter>
))

this.state.counters.map（（计数器）=>(
))

通过这种方式，您的组件
计数器将能够调用
this.props.id
您没有向
传递id，请尝试
@gman谢谢。它起作用了。忘了加上那个。