[英]Function is not defined no-undef
Hi I'm a beginner in jsx and I'm facing I'm sure a simple bug but I'm unable to solve it i've coded a simple delete function in my app js, and I'm stuck on this error.嗨,我是 jsx 的初学者,我肯定会遇到一个简单的错误,但我无法解决它我在我的应用程序 js 中编写了一个简单的删除 function,我被困在这个错误上。
here's my App.js file这是我的 App.js 文件
import React, { Component } from 'react'; import Essai from './Essai.js'; import AddEssai from './addEssai.js'; class App extends Component { state = { essais: [ {name: 'pek', age: 30, sexe: 'f', id:'1'}, {name: 'plop', age: 31, sexe: 'fh', id:'2'}, {name: 'pekkrure', age: 35, sexe: 'h', id:'3'} ] } deleteEssai = (id) =>{ console.log('fonction ok') } render() { return ( <div className="App"> <h1>My first react app</h1> <Essai essai ={this.state.essais}/> <AddEssai deleteEssai = {this.deleteEssai} addEssai = {this.addEssai} /> </div> ) }; } export default App;
And here's my component这是我的组件
import React, { Component } from 'react'; const Essai = (props) => { //console.log(this.props.age) const { essai } = props; const essaiList = essai.map( essai => { return( <div className= "essai" key = {essai.id}> <div>Name: {essai.name} </div> <div>Age: {essai.age} </div> <div>sexe: {essai.sexe} </div> <button onClick = {() => {deleteEssai(essai.id)}}>DELETE</button> </div> ) }) return( <div className = "essaiList"> {essaiList}; </div> ) } export default Essai
I always get this error我总是收到这个错误
./src/Essai.js Line 13:43: 'deleteEssai' is not defined no-undef ./src/Essai.js 第 13:43 行:'deleteEssai' 未定义 no-undef
If someone could take a minute to guide me that would be very nice thank you!!!如果有人可以花一点时间指导我,那将非常好,谢谢!!!!
Actually you are using deleteEssai
in your child component, but never pass it as a prop to it , so it will throw an undefined error since there is no such a thing there.实际上,您在子组件中使用
deleteEssai
,但永远不要将它作为道具传递给它,因此它会抛出一个未定义的错误,因为那里没有这样的东西。 You just need to pass it as a prop to your child component.您只需要将它作为道具传递给您的子组件。
Like this:像这样:
<Essai deleteEssai={this.deleteEssai} essai={this.state.essais}/>
And then you need to destructure in your child component as well.然后你还需要在你的子组件中解构。
const { essai, deleteEssai } = props;
2 things you should look at:你应该看的两件事:
deleteEssai
as a prop to this component <Essai />
in you <App />
.deleteEssai
作为道具传递给您<App />
中的此组件<Essai />
>。import React, { Component } from 'react';
import Essai from './Essai.js';
import AddEssai from './addEssai.js';
class App extends Component {
state = {
essais : [
{name : 'pek', age: 30, sexe : 'f', id:'1'},
{name : 'plop', age: 31, sexe : 'fh', id:'2'},
{name : 'pekkrure', age: 35, sexe : 'h', id:'3'}
]
}
deleteEssai = (id) =>{
console.log('fonction ok')
}
render() {
return (
<div className="App">
<h1>My first react app</h1>
{/* ->>> Pass here*/}
<Essai essai={this.state.essais} deleteEssai={this.deleteEssai}/>
<AddEssai deleteEssai = {this.deleteEssai} addEssai = {this.addEssai} />
</div>
)
};
}
export default App;
<Essai />
you use it from prop:<Essai />
你从 prop 中使用它:import React, { Component } from 'react';
const Essai = (props) => {
//console.log(this.props.age)
// Desctructure 'deleteEssai' from props
const { essai, deleteEssai } = props;
const essaiList = essai.map( essai => {
return(
<div className= "essai" key = {essai.id}>
<div>Name: {essai.name} </div>
<div>Age: {essai.age} </div>
<div>sexe: {essai.sexe} </div>
<button onClick = {() => {deleteEssai(essai.id)}}>DELETE</button>
</div>
)
})
return(
<div className = "essaiList">
{essaiList};
</div>
)
}
export default Essai;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.