如何在函数中读取 this.props

IT技术 reactjs null ecmascript-6
2021-04-29 23:27:25

我是 ES6 的 reactjs 新手，问题是我无法读取 onDelete() 函数中的“this.props.productId”属性，这是错误：DeleteProductComponent.js:15 Uncaught TypeError: Cannot read property 'props' of null谁能给我一个最佳解决方案或告诉我我是什么做错了吗？谢谢

 import React, { Component } from 'react';

    class DeleteProductComponent extends Component {

     componentDidMount() {

        $('.page-header h1').text('Delete Product');

        }

onDelete(){

var id = this.props.productId;

        $.ajax({
            url: "http://localhost/my-app/public/delete.php",
            type : "POST",
            contentType : 'application/json',
            data : JSON.stringify({'id' : id}),
            success : function(response) {
                this.props.changeAppMode('read');
            }.bind(this),
            error: function(xhr, resp, text){
                // show error in console
                console.log(xhr, resp, text);
            }
        });
    }

    // handle save changes button here
    // handle save changes button clicked

      render () {

        return (
            <div className='row'>
                <div className='col-md-3'></div>
                <div className='col-md-6'>
                    <div className='panel panel-default'>
                        <div className='panel-body text-align-center'>Are you sure?</div>
                        <div className='panel-footer clearfix'>
                            <div className='text-align-center'>
                                <button onClick={this.onDelete}
                                    className='btn btn-danger m-r-1em'>Yes</button>
                                <button onClick={() => this.props.changeAppMode('read')}
                                    className='btn btn-primary'>No</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='col-md-3'></div>
            </div>
        );
      }

    } 
    export default DeleteProductComponent;
2个回答

onDelete()通过两种方式将函数绑定到组件：

在constructor：

class DeleteProductComponent extends Component {

  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
  }

  componentDidMount() {}

  onDelete() {}

  render() {}

}

或者使用 ES6 的语法for onDelete()（然后它会自己绑定到组件）：

 onDelete = () => {

    var id = this.props.productId;

    $.ajax({
        url: "http://localhost/my-app/public/delete.php",
        type : "POST",
        contentType : 'application/json',
        data : JSON.stringify({'id' : id}),
        success : function(response) {
            this.props.changeAppMode('read');
        }.bind(this),
        error: function(xhr, resp, text){
            // show error in console
            console.log(xhr, resp, text);
        }
    });
  }

你在classs 你需要绑定this到class. 最好的地方是在 的构造函数中，class因为它只会在类第一次实例化时运行，而不是在渲染方法中执行，巫婆将在每次渲染时创建处理程序的新实例。
所以你应该在constructor： 

    class DeleteProductComponent extends Component {
        constructor(props, context) {
            super(props, context);

            this.onDelete = this.onDelete.bind(this);
        }
    //.... rest of the class
其它你可能感兴趣的问题
上一篇如何解决“找不到module：无法解析‘react’”？ 下一篇如何使用react-router通过路由将props传递给react组件？