[英]How to fix ' "X" is not defined no-undef' error in React.js
I am following an online tutorial to learn React and have encountered an error我正在按照在线教程学习 React,但遇到了错误
./src/components/counter.jsx Line 24: 'product' is not defined no-undef
Could someone please explain what is going wrong in simple terms so I know how to fix this and can deal with it next time I encounter it.有人可以用简单的术语解释出了什么问题,这样我就知道如何解决这个问题,下次遇到它时可以处理它。
I have looked through all related questions I could find on stackoverflow and haven't been able to fix it, if I have missed one that answers this then please link it.我已经查看了我可以在 stackoverflow 上找到的所有相关问题,但无法修复它,如果我错过了一个可以回答这个问题的问题,请链接它。
I have had this error in the past but usually that was just because I had a typo (eg a capital instead of a lowercase) or did not import something correctly however that is not the case this time as far as I can tell.我过去遇到过这个错误,但通常那只是因为我打错了字(例如大写字母而不是小写字母)或者没有正确导入某些东西,但据我所知这次情况并非如此。
I can see no difference between my code to what is in the video.我看不出我的代码与视频中的代码有什么区别。
===index.js=== ===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=== ===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=== ===计数器.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;
The expected output is that when I run it and go to the webpage it has buttons which I can press and counters beside them which will display how many times they have been pressed.预期的 output 是当我运行它和 go 到网页时它有我可以按下的按钮和它们旁边的计数器,它将显示它们被按下的次数。
What actually happens is that when I go to the page it displays the following:实际发生的是,当我 go 到页面时,它显示以下内容:
Failed to compile
编译失败
./src/index.js
./src/index.js
Cannot find file: 'Counters.jsx' does not match the corresponding name on disk: './src/components/counters.jsx'.
找不到文件:“Counters.jsx”与磁盘上的相应名称不匹配:“./src/components/counters.jsx”。
This error occurred during the build time and cannot be dismissed.此错误发生在构建期间,无法消除。
onClick={() => this.handleIncrement(product)}
onClick={() => this.handleIncrement(product)}
At the point where this executes, product
does not exist.在执行此操作时,
product
不存在。 The variable hasn't been declared or assigned anywhere, hence the not defined
message.该变量尚未在任何地方声明或分配,因此
not defined
消息。
This message is the product of a linter like eslint , which:此消息是像eslint这样的linter 的产物,它:
is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
是一种用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具,目的是使代码更加一致并避免错误。
Linters may be configured to emit warnings and errors, and when used as part of a build or compilation process, may be configured to abort compilation. Linter 可以配置为发出警告和错误,并且当用作构建或编译过程的一部分时,可以配置为中止编译。
I'm not sure what the intent is here, but you could do onClick={this.handleIncrement}
instead and it will increment your counter.我不确定这里的意图是什么,但你可以改为
onClick={this.handleIncrement}
,它会增加你的计数器。
Even I was facing the same error as mentioned above.甚至我也面临着与上述相同的错误。 I am confused where this product parameter is coming from.
我很困惑这个产品参数来自哪里。 However, I tried this step and it worked:
但是,我尝试了这一步并且它起作用了:
onClick={() => this.handleIncrement({})
Just pass an empty object and it will work.只需传递一个空对象,它就会起作用。
Hope this helps.希望这可以帮助。
you are passing parameter as a variabe which is not defined.您将参数作为未定义的变量传递。
try this尝试这个
onClick={() => this.handleIncrement('product')}
or declare product and assing it a value或申报产品并为其赋值
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>
);
}
The product that you are passing in the following code is not defined.您在以下代码中传递的产品未定义。
onClick={() => this.handleIncrement(product)}
Try this onClick={this.handleIncrement}
Many have already suggested this.试试这个
onClick={this.handleIncrement}
很多人已经建议了。
The file path we provide while importing is case sensitive.我们在导入时提供的文件路径区分大小写。 So you can modify the import in your index.js file, try this
所以你可以修改 index.js 文件中的导入,试试这个
import Counters from "./components/counters";
for import Counters from "./components/Counters";
用于
import Counters from "./components/Counters";
Here is the link to complete source code of counter-app.这是 counter-app 完整源代码的链接。
Problem:问题:
'onNumberClick' is not defined no-undef
'onNumberClick' 未定义 no-undef
HTML Code: HTML 代码:
<PlayNumber
number={number}
TheOnClick={onNumberClick}
/>
Component:零件:
const PlayNumber = (props) => (
<button className="number" onClick={() => onNumberClick(props.number)}>
{props.number}
</button> );
Solution:解决方案:
When you pass a delegate/function to a component you need to use the props name TheOnClick
to invoke it, you'll get the error if you try the name of the delegate/function in this case onNumberClick
:当您将委托/函数传递给组件时,您需要使用道具名称
TheOnClick
来调用它,如果在这种情况下尝试使用委托/函数的名称onNumberClick
,则会收到错误消息:
<button className="number" onClick={() => props.TheOnClick(props.number, props.status)}
I'm not sure, but try to use the same case for the file name.我不确定,但尝试对文件名使用相同的大小写。 The class is called Counters, the file is called counters.
类称为计数器,文件称为计数器。 Make the C uppercase in the file name.
使文件名中的 C 大写。
尝试在您调用的函数内定义 product 变量。
<button onClick={product => this.handleIncrement(product)} className="btn btn-secondary btn-sm">Increment</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.