Я слежу за онлайн-учебником по 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({amp}lt;Counters /{amp}gt;, document.getElementById("root")); serviceWorker.unregister(); 

=== counter.jsx ===

 import React, { Component } from "react"; class Counter extends Component { state = { count: 0 }; handleIncrement = product ={amp}gt; { console.log(product); this.setState({ count: this.state.count   1 }); }; render() { return ( {amp}lt;div{amp}gt; {amp}lt;span className={this.getBadgeClasses()}{amp}gt;{this.formatCount()}{amp}lt;/span{amp}gt; {amp}lt;button onClick={() ={amp}gt; this.handleIncrement(product)} //this is the line with the error className="btn btn-secondary btn-sm" {amp}gt; Increment {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); } 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 ( {amp}lt;div{amp}gt; {amp}lt;Counter /{amp}gt; {amp}lt;Counter /{amp}gt; {amp}lt;Counter /{amp}gt; {amp}lt;Counter /{amp}gt; {amp}lt;/div{amp}gt; ); } } export default Counters; 

Ожидаемый результат — когда я запускаю его и захожу на веб-страницу, на нем есть кнопки, которые я могу нажимать, и счетчики рядом с ними, которые отображают, сколько раз они были нажаты.

На самом деле происходит следующее: когда я перехожу на страницу, на ней отображается следующее:

Не удалось скомпилировать

./src/index.js

Не удается найти файл: ‘Counters.jsx’ не соответствует соответствующему имени на диске: ‘./src/components/counters.jsx’.
Эта ошибка произошла во время сборки и не может быть отклонена.

onClick = {() ={amp}gt; this.handleIncrement (product)}

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

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

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

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

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

Вы передаете параметр как переменную, которая не определена.

попробуй это

 onClick={() ={amp}gt; this.handleIncrement('product')} 

или объявить продукт и присвоить ему значение

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

Даже я столкнулся с той же ошибкой, что и упомянутая выше. Я запутался, откуда этот параметр продукта. Тем не менее, я попробовал этот шаг, и это сработало:

 onClick={() ={amp}gt; this.handleIncrement({}) 

Просто пропустите пустой объект, и он будет работать.

Надеюсь это поможет.

Апурва Чури

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

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

Попробуйте определить переменную продукта внутри вызываемой вами функции.

 {amp}lt;button onClick={product ={amp}gt; this.handleIncrement(product)} className="btn btn-secondary btn-sm"{amp}gt;Increment{amp}lt;/button{amp}gt;