1

enter image description here

class Table extends Component {

    constructor(props) {
        super(props);
        
        this.state = {
            employee: [],
        }
    }
    //Life Sycle Methord
    componentDidMount() {
        this.getEmployeeList();
    }

    // Get Employee List
    getEmployeeList = (e) => {
        axios.get('get/employee/list').then(function (response) {
            console.log(response.data);
            this.setState({
                employee : response.data,
            });
             
        })
    }

    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <table className="table table-hover">
                                <thead>
                                    <tr>
                                        <th scope="col" width="100px">#</th>
                                        <th scope="col" width="100px">Name</th>
                                        <th scope="col" width="100px">Slary</th>
                                        <th scope="col" width="100px">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.employee.map(function (x, i) {
                                        <TableRow key={i} data={x} />
                                    })}

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Table;

When I try this code(as above mentioned image https://i.stack.imgur.com/gazFY.png), I'm getting an error as below...

"Cannot read properties of undefined (reading 'setState')"

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Chenaya Ruheli
  • 25
  • 4

1 Answers1

0

you can directly call this.setState in the getEmployeeList..


constructor(props) {
    super(props);
    
    this.state = {
        employee: [],
    }
    this.getEmployeeList = this.getEmployeeList.bind(this);
}
async functiion getEmployeeList(e) {
    const response = await axios.get('get/employee/list');
        console.log(response.data);
        this.setState({
            employee : response.data,
        });
}

Is there any particular reason, that you are assigning this to the variable self. also this keyword works differently in the normal function & in the arrow function..

Refer..

How does the "this" keyword work, and when should it be used?

sms
  • 1,380
  • 1
  • 3
  • 5
  • I tried your code, but it did not work. Same error msg is coming to the console. "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setState')" – Chenaya Ruheli Aug 15 '22 at 14:17
  • let self=this; axios.get('get/employee/list').then(function (response) { self.setState({ employee : response.data, }); }) it's my issue. this code is work! – Chenaya Ruheli Aug 16 '22 at 03:50
  • you have to bind the function in the constructor in class component.. – sms Aug 16 '22 at 04:03
  • I have updated the answer.. refer this.. https://stackoverflow.com/questions/38334062/why-do-you-need-to-bind-a-function-in-a-constructor – sms Aug 16 '22 at 04:10