Question

你好，我是React和编码的新手。我正在关注在线教程以学习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();

=== counter.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;

=== counters.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;

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

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

Failed to compile

./src/index.js

Cannot find file: 'Counters.jsx' does not match the corresponding name on disk: './src/components/counters.jsx'.
This error occurred during the build time and cannot be dismissed.

Answer 1

onClick = {（）=> this.handleIncrement（product）}

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

此消息是像eslint这样的短绒的产物，

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

Linter可以配置为发出警告和错误，并且可以在构建或编译过程中使用时，配置为中止编译。

我不确定这里的意图是什么，但是您可以改为使用onClick={this.handleIncrement}，它会增加您的计数器。

Answer 2

即使我遇到了与上述相同的错误。我对这个产品参数的来源感到困惑。但是，我尝试了此步骤，它确实有效：

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

只需传递一个空对象，它将起作用。

希望这会有所帮助。

Answer 3

我不确定，但是请尝试对文件名使用相同的大小写。该类称为计数器，文件称为计数器。在文件名中将C大写。

Answer 4

您正在传递参数作为未定义的变量。

尝试

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

或声明产品并为其赋值

render() {
let product = Something
    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>
    );
  }

Answer 5

您在以下代码中传递的产品未定义。

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

尝试一下 onClick={this.handleIncrement} 许多人已经提出了这个建议。

我们在导入时提供的文件路径区分大小写。因此，您可以在index.js文件中修改导入，请尝试

import Counters from "./components/counters";

import Counters from "./components/Counters";

这里是{{3}}，用于完成counter-app的源代码。

Answer 6

尝试在要调用的函数中定义产品变量。

<button onClick={product => this.handleIncrement(product)} className="btn btn-secondary btn-sm">Increment</button>

如何在React.js中修复'“ X”未定义no-undef'错误

6 个答案: