reactjs - 函数未定义 no-undef
问题描述
嗨,我是 jsx 的初学者,我确信我遇到了一个简单的错误,但我无法解决它我在我的应用程序 js 中编写了一个简单的删除功能,我被困在这个错误上。
这是我的 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;
这是我的组件
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
我总是收到这个错误
./src/Essai.js 第 13:43 行:'deleteEssai' 未定义 no-undef
如果有人可以花一点时间指导我,那将非常好,谢谢!!!!
解决方案
实际上你deleteEssai
在你的子组件中使用,但永远不要将它作为道具传递给它,所以它会抛出一个未定义的错误,因为那里没有这样的东西。您只需要将它作为道具传递给您的子组件。
像这样:
<Essai deleteEssai={this.deleteEssai} essai={this.state.essais}/>
然后你还需要在你的子组件中解构。
const { essai, deleteEssai } = props;
推荐阅读
- iframe - 如何保护原始源 (URL) 不被直接访问但同时允许我的 iFrame 加载受保护的页面?
- java - 创建枚举时出错,每个值都指向一个字符串列表
- php - 简码 - 带有 ACF 术语图标的分类术语列表
- c# - 应用启动后调用异步方法的最佳模式是什么?(构造函数中的Fire&Forget?)
- aws-lambda - 验证 AWS-SAM 模板/减少周转时间以发现错误
- android - 模拟器没有启动
- python - 使用title属性转换numpy数组中的字符串
- apache-nifi - Nifi中的OIDC断开连接
- reactjs - 使用 react native redux 刷新 FlatList
- python - 如何在函数中使用 try?