TypeError：无法读取未定义的属性“ getAttendance”_JavaScript

我添加了一个getAttendance函数，只有在单击表行时才应触发该函数。 如果我定义

<tr onclick={this.getAttendance} key={key}>正常运行，但是如果我将其更改为将函数调用为<tr onclick={this.getAttendance} key={key}>或<tr onclick={()=>{this.getAttendance}} key={key}>抛出上述错误。

 import React, { Component } from 'react'; import './Attendance.css'; import { Link, withRouter } from 'react-router-dom'; //@ Redux import { connect } from 'react-redux'; import propTypes from 'prop-types'; import { get_all_employees} from '../../../../store/actions/employeeActions'; export class Attendance extends Component { constructor(props){ super(props); } componentDidMount(){ this.props.get_all_employees(); } getAttendance = (e) => { e.preventDefault(); console.log('Hello'); } render() { const tbodylist = []; let i = 1; const { allemployee } = this.props.employee; Object.keys(allemployee).forEach(function(key) { console.log(key, allemployee[key]); let designation = (allemployee[key].designation === 'M')? 'Manager' : (allemployee[key].designation === 'AM') ? 'Assistant Manager' : (allemployee[key].designation === 'LAS') ? 'LAS' : null ; let val = ( <tr onclick={this.getAttendance} key={key}> <th scope="row" className='text-uppercase vasp_th'>{i}</th> <td className='text-uppercase vasp_td'>{allemployee[key].employee_id}</td> <td className='text-uppercase vasp_td'>{allemployee[key].name}</td> <td className='text-uppercase vasp_td'>{allemployee[key].doj}</td> <td className='text-uppercase vasp_td'>{designation}</td> <td className='text-uppercase vasp_td'>{allemployee[key].reporting_name}</td> </tr>); tbodylist.push(val); i++; }); return ( <div className='container-fluid'> <div className='row'> <div className='col-lg'> {/**First Row */} <div className='row vasp_first_row'> <div className='col-sm'> <button className='btn btn-light bg-white px-4'>Filters</button> </div> <div className='col-sm-3'> <Link className='links' to='/add-sales-person'><button className='btn btn_modified text-uppercase'><i className="fa fa-plus" aria-hidden="true"></i>&nbsp;Add Sales People</button></Link> </div> </div> {/**First Row Ends*/} </div> </div> <div className='row'> <div className='col-lg vasp_second_col text-center'> {/** Second Row TABLES */} <table className="table table-borderless view_table"> <thead> <tr> <th scope="col" className='text-uppercase vasp_th'>Sr. No</th> <th scope="col" className='text-uppercase vasp_th'>Employee Id</th> <th scope="col" className='text-uppercase vasp_th'>Name</th> <th scope="col" className='text-uppercase vasp_th'>Date of Joining</th> <th scope="col" className='text-uppercase vasp_th'>Designation</th> <th scope="col" className='text-uppercase vasp_th'>Reporting To</th> </tr> </thead> <tbody> {tbodylist} </tbody> </table> {/**Second Row Ends */} </div> </div> </div> ) } } const mapStateToProps = (state)=> ({ employee:state.employee }) export default connect(mapStateToProps,{get_all_employees})(withRouter(Attendance));

`

如果您想使用该功能

<tr onclick={()=>{this.getAttendance}}   key={key}>

像这样。 尝试将函数绑定到构造函数中。

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

我希望这会起作用。

谢谢

我相信问题出在每个循环中：

Object.keys(allemployee).forEach(function(key) { // HERE
        console.log(key, allemployee[key]);
        let designation = (allemployee[key].designation === 'M')? 'Manager' : (allemployee[key].designation === 'AM') ? 'Assistant Manager' : (allemployee[key].designation === 'LAS') ? 'LAS' : null ;
        let val =    ( <tr onclick={this.getAttendance}   key={key}>
                        <th scope="row" className='text-uppercase vasp_th'>{i}</th>
                        <td  className='text-uppercase vasp_td'>{allemployee[key].employee_id}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].name}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].doj}</td>
                        <td className='text-uppercase vasp_td'>{designation}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].reporting_name}</td>
                    </tr>);
            tbodylist.push(val);
            i++;
    });

使用function关键字声明一个函数不会绑定本地上下文，您可以尝试将其替换为：

Object.keys(allemployee).forEach((key) => {

您的问题是您内部的匿名功能

Object.keys(allemployee).forEach(function(key) { // HERE
    console.log(key, allemployee[key]);
    let designation = (allemployee[key].designation === 'M')? 'Manager' : (allemployee[key].designation === 'AM') ? 'Assistant Manager' : (allemployee[key].designation === 'LAS') ? 'LAS' : null ;
    let val =    ( <tr onclick={this.getAttendance}   key={key}>
                    <th scope="row" className='text-uppercase vasp_th'>{i}</th>
                    <td  className='text-uppercase vasp_td'>{allemployee[key].employee_id}</td>
                    <td className='text-uppercase vasp_td'>{allemployee[key].name}</td>
                    <td className='text-uppercase vasp_td'>{allemployee[key].doj}</td>
                    <td className='text-uppercase vasp_td'>{designation}</td>
                    <td className='text-uppercase vasp_td'>{allemployee[key].reporting_name}</td>
                </tr>);
        tbodylist.push(val);
        i++;
});

您正在使用function(key)将结合this到当地的情况。 这不是您想要的。

您可以把this调用之前在一个变量Object.keys(allemployee).forEach(...)

const that = this;
Object.keys(allemployee).forEach(key => { // HERE
    //that.getAttendance
});

或者您可以使用粗箭头功能

Object.keys(allemployee).forEach(key => { // HERE
    ...
});

TypeError：无法读取未定义的属性“ getAttendance”

问题描述

1楼

2楼

3楼