Question

我刚刚开始学习react js，并遵循youtube上的mosh教程。我很肯定我做了他所做的一切，但我的道具说得不清楚。

可以访问counters.jsx中的“值”，但是当我尝试获取ID时，它说未定义。这是我在控制台中获得的输出：“事件处理程序被调用！未定义”

Counters.jsx

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

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

  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}
          />
        ))}
      </div>
    );
  }
}

export default Counters;

Counter.jsx

    import React, { Component } from "react";

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

  // constructor() {
  //   super();
  //   this.handleIncrement = this.handleIncrement.bind(this);
  // }

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

  render() {
    return (
      <div>
        <span className={this.getBadgeClasse()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(this.state.product)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m2"
        >
          Delete
        </button>
      </div>
    );
  }

  getBadgeClasse() {
    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;

谢谢

Answer 1

在Counters.jsx中，您不会传递ID道具。您必须像这样：

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

Answer 2

我看不到道具中有任何钥匙ID

          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            value={counter.value}
          />

但是在子组件的按钮处理程序中，您正在使用this.props.id。您可以使用this.props.key或在使用Counter标签的父组件中添加名为id的道具

        <button
          onClick={() => this.props.onDelete(this.props.id)}
          className="btn btn-danger btn-sm m2"
        >
          Delete
        </button>

[tag] [React.js]子项显示未定义的道具

2 个答案: