为什么不通过以下代码传递道具工作？

Posted 2021-04-30

我正在学习反应，并试图通过一个道具（我认为）。以下是我的代码。当我在浏览器中单击“增量”或“删除”时，弹出错误消息，提示“ this.props.onDelete不是函数”。与增量相同； “ this.props.onIncrement不是函数。”我哪里做错了？谢谢！

App.js

import React, { Component } from "react";
import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 },
    ],
  };
  render() {
    return (
      <React.Fragment>
        <NavBar />
        <main className="container">
          <Counters
            counters={this.state.counters}
            onReset={this.handleReset}
            onIncrement={this.handleIncrement}
            onDelete={this.handleDelete}
          />
        </main>
      </React.Fragment>
    );
  }
}

export default App;

counters.js

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

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

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

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

  render() {
    console.log(this.props);

    return (
      <div>
        <button
          onClick={this.props.onReset}
          className="btn btn-primary btn-sm m-2"
        >
          Reset
        </button>
        {this.props.counters.map((counter) => (
          <Counter
            key={counter.id}
            counter={counter}
            onDelete={this.props.onDelete}
            onIncrement={this.props.onIncrement}
          ></Counter>
        ))}
      </div>
    );
  }
}

export default Counters;

counter.js

import React, { Component } from "react";

class Counter extends Component {
  doHandleIncrement = () => {
    this.handleIncrement({ id: 1 });
  };

  render() {
    console.log(this.props);

    return (
      <div>
        {this.props.children}
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.props.onIncrement(this.props.counter)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
        <button
          onClick={() => this.props.onDelete(this.props.counter.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Delete
        </button>
      </div>
    );
  }

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

答案

[handleIncrement和朋友需要在App中定义。

另一答案

App.js正在呈现计数器并传入onDelete={this.handleDelete}。但是app.js没有handleDelete函数，因此this.handleDelete未定义。然后，计数器将此未定义的内容转发到计数器，后者尝试调用它。

如果应该将App.js作为实现handleDelete的文件，则将实现转移到App.js中。如果相反，Counters是应该实现它的计数器，则App不需要传递它，而Counters需要使用其自己的功能。

另一答案

在App组件中，没有定义为handleDelete的功能。

您需要将这些功能从Counters移至App组件

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

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

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

另一答案

这些功能未在您的应用中定义：

        onReset={this.handleReset}
        onIncrement={this.handleIncrement}
        onDelete={this.handleDelete}