为什么给我“无​​法读取未定义的属性'deleteProduct'”错误反应

Question

在react js中删除一行时出现错误。错误是“无法读取未定义的属性'deleteProduct'”。也有任何简单的方法可以使用自定义api从数据库中删除数据。下面是我从数据库中删除数据的完整代码。

这是我删除行的代码-

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>
    );
  }
}

请帮助我删除此错误。 预先感谢。

Answer 1

您的映射功能正在创建新的作用域：

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, 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>
                        )
                    })

Answer 2

这可能是由于此处失去上下文所致：

{
                        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, 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>
                            )
                        })
                    }