變量未在 React-app 中定義 no-undef

Question

我在這里關注Mosh Hamedani的教程來創建react-app 。

我完全按照他說的做了。

我試圖將一個名為product的參數傳遞給一個為onClick調用的函數，但是，我收到一個錯誤，我沒有找到太多信息。

這是代碼：

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  formatCount() {
    return this.state.count === 0 ? "Zero" : this.state.count;
  }

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

  render() {
    return (
      <React.Fragment>
        <span className={this.formatSpan()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)}
          className="btn btn-primary"
        >
          Increment
        </button>
      </React.Fragment>
    );
  }
}

export default Counter;

這是錯誤：

編譯失敗。

./src/components/counter.jsx 第 41 行：'product' 未定義 no-undef

搜索關鍵字以了解有關每個錯誤的更多信息。

Answer 1

您將產品作為變量傳遞，該變量未定義帶有倒轉逗號的傳遞參數，否則聲明它並賦值。

用

onClick={() => this.handleIncrement("product")}

Answer 2

您的組件中從未定義過產品。 因此沒有定義。 您可以在組件狀態中聲明產品，或將產品作為道具傳遞給組件。

Answer 3

下面的代碼對我有用：

onClick={(product) => this.handleIncrement(product)}

Answer 4

按照相同的教程，我遇到了同樣的問題。 我的理解是這里的“產品”是指事件。 就像 H_R_S 建議的那樣，使用以下代碼：

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

render() {
    return (
        <React.Fragment>
            <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
            <button onClick={(product) => this.handleIncrement(product)} className="btn btn-secondary btn-sm">Increment</button>
        </React.Fragment>
    );
}

您將能夠在控制台中看到該事件：

結果在控制台