如何修复 React.js 中的“未定义“X”未定义错误

Question

我正在按照在线教程学习 React 并遇到错误

./src/components/counter.jsx Line 24:  'product' is not defined  no-undef 

有人可以简单地解释一下出了什么问题，这样我就知道如何解决这个问题，并且下次遇到它时可以处理它。

我已经查看了我在 stackoverflow 上可以找到的所有相关问题，但无法解决它，如果我错过了一个回答这个问题的问题，请链接它。

我过去曾经遇到过这个错误，但通常那只是因为我有一个错字（例如大写而不是小写）或者没有正确导入某些东西，但据我所知，这次并非如此。

我看不出我的代码与视频中的代码有什么区别。

===index.js===

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
//import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Counters from "./components/Counters";

ReactDOM.render(<Counters />, document.getElementById("root"));
serviceWorker.unregister();

===计数器.jsx===

import React, { Component } from "react";

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

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

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)} //this is the line with the error
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

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

export default Counter;

===计数器.jsx===

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

class Counters extends Component {
  state = {};
  render() {
    return (
      <div>
        <Counter />
        <Counter />
        <Counter />
        <Counter />
      </div>
    );
  }
}

export default Counters;

预期的输出是，当我运行它并转到网页时，它有我可以按下的按钮和它们旁边的计数器，它们将显示它们被按下的次数。

实际发生的是，当我转到页面时，它显示以下内容：

编译失败

./src/index.js

找不到文件：“Counters.jsx”与磁盘上的相应名称不匹配：“./src/components/counters.jsx”。
此错误发生在构建期间，无法消除。

Answer 1

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

在执行时，product不存在。该变量尚未在任何地方声明或分配，因此会出现该not defined消息。

此消息是像eslint这样的 linter 的产物，它：

是一种用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。

Linter 可以配置为发出警告和错误，并且当用作构建或编译过程的一部分时，可以配置为中止编译。

我不确定这里的意图是什么，但你可以onClick={this.handleIncrement}这样做，它会增加你的计数器。