Как исправить ошибку "X" не определена no-undef 'в React.js - PullRequest
Новая
       15

Как исправить ошибку "X" не определена no-undef 'в React.js

3 голосов
/ 22 мая 2019

Здравствуйте, я новичок в 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.

Ответы [ 2 ]

2 голосов
/ 22 мая 2019

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

В точке, где это выполняется, product не существует.Переменная нигде не была ни объявлена, ни присвоена, следовательно, сообщение not defined.

Это сообщение является произведением линтера типа eslint , который:

- это инструмент для идентификации и составления отчетов по шаблонам, найденным в коде ECMAScript / JavaScript, с целью сделать код более согласованным и избежать ошибок.

Линтеры могут быть настроены на выдачу предупреждений и ошибок, икогда используется как часть процесса компоновки или компиляции, может быть настроен на прерывание компиляции.

Я не уверен, что здесь задумано, но вы могли бы вместо этого сделать onClick={this.handleIncrement}, и это увеличит ваш счетчик.

0 голосов
/ 22 мая 2019

Я не уверен, но попробуйте использовать тот же регистр для имени файла.Класс называется Счетчики, файл называется Счетчики.Введите заглавную букву C в имени файла.

...