Javascript 为什么它给了我'；无法读取属性'；删除产品&x27；未定义的'；错误反应Js
我在react js中删除一行时出错。错误为“无法读取未定义的”的属性“deleteProduct”。还有任何简单的方法可以使用自定义api从数据库中删除数据。下面是我从数据库中删除数据的完整代码 这是我删除行的代码-Javascript 为什么它给了我'；无法读取属性'；删除产品&x27；未定义的'；错误反应Js,javascript,reactjs,api,Javascript,Reactjs,Api,我在react js中删除一行时出错。错误为“无法读取未定义的”的属性“deleteProduct”。还有任何简单的方法可以使用自定义api从数据库中删除数据。下面是我从数据库中删除数据的完整代码 这是我删除行的代码- import React from 'react'; import ReactDOM from 'react-dom'; export default class FetchedData extends React.Component{ constructor(props){
import React from 'react';
import ReactDOM from 'react-dom';
export default class FetchedData extends React.Component{
constructor(props){
super(props);
this.state={
UserData:[],
response: {}
};
this.headers=[
{key:1,label:'Name'},
{key:2,label:'Department'},
{key:3,label:'Marks'},
];
this.deleteProduct=this.deleteProduct.bind(this);
}
componentDidMount(){
this.lookupInterval = setInterval(() => {
fetch("https://www.veomit.com/test/zend/api/fetch.php")
.then(response => {
return response.json();
})
.then(result => {
this.setState({
UserData:result
})
.catch(error => {
console.log(
"An error occurred while trying to fetch data from Foursquare: " +error
);
});
});
}, 500)
}
deleteProduct(userId) {
const { UserData } = this.state;
const apiUrl = 'https://www.veomit.com/test/zend/api/delete.php';
const formData = new FormData();
formData.append('userId', userId);
const options = {
method: 'POST',
body: formData
}
fetch(apiUrl, options)
.then(res => res.json())
.then(
(result) => {
this.setState({
response: result,
UserData: UserData.filter(item => item.id !== userId)
});
},
(error) => {
this.setState({ error });
}
)
}
render(){
return(
<div>
<table class="table table-bordered">
<thead>
<tr>
{
this.headers.map(function(h) {
return (
<th key = {h.key}>{h.label}</th>
)
})
}
</tr>
</thead>
<tbody>
{
this.state.UserData.map(function(item, key) {
return (
<tr key = {key}>
<td>{item.name}</td>
<td>{item.department}</td>
<td>{item.marks}</td>
<td><span onClick={() => this.deleteProduct(item.id)}>Delete</span></td>
</tr>
)
})
}
</tbody>
</table>
</div>
);
}
}
从“React”导入React；
从“react dom”导入react dom；
导出默认类FetchedData扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
用户数据：[]，
响应：{}
};
这是我的头=[
{键：1，标签：'Name'}，
{键：2，标签：'Department'}，
{键：3，标签：'Marks'}，
];
this.deleteProduct=this.deleteProduct.bind（this）；
}
componentDidMount（）{
this.lookupInterval=setInterval（（）=>{
取回（“https://www.veomit.com/test/zend/api/fetch.php")
。然后（响应=>{
返回response.json（）；
})
。然后（结果=>{
这是我的国家({
用户数据：结果
})
.catch（错误=>{
console.log(
尝试从Foursquare获取数据时出错：“+错误”
);
});
});
}, 500)
}
删除产品（用户ID）{
const{UserData}=this.state；
康斯特阿皮乌尔酒店https://www.veomit.com/test/zend/api/delete.php';
const formData=new formData（）；
append（'userId'，userId）；
常量选项={
方法：“POST”，
正文：formData
}
获取（APIRL、选项）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
答复：结果，
UserData:UserData.filter（item=>item.id！==userId）
});
},
（错误）=>{
this.setState（{error}）；
}
)
}
render（）{
返回(
{
this.headers.map（函数（h）{
返回(
{h.label}
)
})
}
{
this.state.UserData.map（函数（项，键）{
返回(
{item.name}
{项目.部门}
{item.marks}
this.deleteProduct（item.id）}>Delete
)
})
}
);
}
}
提前感谢。您的映射功能正在创建一个新范围：
this.state.UserData.map(function(item, key) {
return (
<tr key = {key}>
<td>{item.name}</td>
<td>{item.department}</td>
<td>{item.marks}</td>
<td><span onClick={() => this.deleteProduct(item.id)}>Delete</span></td>
</tr>
)
})
this.state.UserData.map（函数（项，键）{
返回(
{item.name}
{项目.部门}
{item.marks}
this.deleteProduct（item.id）}>Delete
)
})
this.state.UserData.map((item, key) => {
return (
<tr key = {key}>
<td>{item.name}</td>
<td>{item.department}</td>
<td>{item.marks}</td>
<td><span onClick={() => this.deleteProduct(item.id)}>Delete</span></td>
</tr>
)
})
this.state.UserData.map（（项，键）=>{
返回(
{item.name}
{项目.部门}
{item.marks}
this.deleteProduct（item.id）}>Delete
)
})
{
this.state.UserData.map(function(item, key) {
return (
<tr key = {key}>
<td>{item.name}</td>
<td>{item.department}</td>
<td>{item.marks}</td>
<td><span onClick={() => this.deleteProduct(item.id)}>Delete</span></td>
</tr>
)
})
}
{
this.state.UserData.map（函数（项，键）{
返回(
{item.name}
{项目.部门}
{item.marks}
this.deleteProduct（item.id）}>Delete
)
})
}
{
this.state.UserData.map((item, key) => {
return (
<tr key = {key}>
<td>{item.name}</td>
<td>{item.department}</td>
<td>{item.marks}</td>
<td><span onClick={() => this.deleteProduct(item.id)}>Delete</span></td>
</tr>
)
})
}
{
this.state.UserData.map（（项，键）=>{
返回(
{item.name}
{项目.部门}
{item.marks}
this.deleteProduct（item.id）}>Delete
)
})
}
this.setState