如何修復 React.js 中的““X”未定義 no-undef”錯誤

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

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

===計數器.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;

預期的 output 是當我運行它和 go 到網頁時它有我可以按下的按鈕和它們旁邊的計數器，它將顯示它們被按下的次數。

實際發生的是，當我 go 到頁面時，它顯示以下內容：

編譯失敗

./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} ，它會增加你的計數器。

Answer 2

甚至我也面臨着與上述相同的錯誤。 我很困惑這個產品參數來自哪里。 但是，我嘗試了這一步並且它起作用了：

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

只需傳遞一個空對象，它就會起作用。

希望這可以幫助。

Answer 3

您將參數作為未定義的變量傳遞。

嘗試這個

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 4

您在以下代碼中傳遞的產品未定義。

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

試試這個onClick={this.handleIncrement}很多人已經建議了。

我們在導入時提供的文件路徑區分大小寫。 所以你可以修改 index.js 文件中的導入，試試這個

import Counters from "./components/counters";

用於import Counters from "./components/Counters";

這是 counter-app 完整源代碼的鏈接。

Answer 5

問題：

'onNumberClick' 未定義 no-undef

HTML 代碼：

<PlayNumber
  number={number} 
  TheOnClick={onNumberClick}
   />

零件：

const PlayNumber = (props) => (
   <button className="number" onClick={() => onNumberClick(props.number)}>
   {props.number}
   </button> );
  

解決方案：

當您將委托/函數傳遞給組件時，您需要使用道具名稱TheOnClick來調用它，如果在這種情況下嘗試使用委托/函數的名稱onNumberClick ，則會收到錯誤消息：

<button className="number" onClick={() => props.TheOnClick(props.number, props.status)} 

Answer 6

我不確定，但嘗試對文件名使用相同的大小寫。 類稱為計數器，文件稱為計數器。 使文件名中的 C 大寫。

Answer 7

嘗試在您調用的函數內定義 product 變量。

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