ReactJS: this.state is undefined on lifecycle hook [duplicate] - reactjs

Question

This question already has answers here:
cannot get the parent property this property when I have two inner loop
(2 answers)
Closed 5 years ago.
I'm building a simple electron-react component.
This component queries enabled Network Interfaces, pushes the data to the state and renders it to the DOM. The component doesn't work because of this error:
"Uncaught TypeError: Cannot read property 'state' of undefined" at this line:
"data = this.state.data.slice();"
Why is this.state undefined? did I miss binding something? Thanks for any advice.
import React from "react";
import os from "os";
export default class GetInterfaces extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
};
componentDidMount() {
let ifaces = os.networkInterfaces();
Object.keys(ifaces).forEach(function (ifname) {
let data;
ifaces[ifname].forEach(function (iface) {
if (iface.internal === true || iface.family === "IPv6") {
return;
}
let networkInterface = {
name: ifname,
mac: iface.mac,
ip: iface.address
};
data = this.state.data.slice();
data.push(networkInterface);
this.setState({ data: data });
});
});
}
render() {
const networkInterfaces = this.state.data.map((networkInterface, index) =>
<ListGroupItem key={index}>
<i class="fa fa-wifi"></i>
<span>{networkInterface.name}</span>
<input type="checkbox"></input>
</ListGroupItem>
);
return (
<div>
{networkInterfaces}
</div>
);
}
}

Answer 1

I think "this" is becoming unbound in the .forEach function, so you can try the trick of saving the context before it like this
componentDidMount() {
let ifaces = os.networkInterfaces();
let that = this; // Note the saving of the context
Object.keys(ifaces).forEach(function (ifname) {
let data;
ifaces[ifname].forEach(function (iface) {
if (iface.internal === true || iface.family === "IPv6") {
return;
}
let networkInterface = {
name: ifname,
mac: iface.mac,
ip: iface.address
};
data = this.state.data.slice();
data.push(networkInterface);
that.setState({ data: data }); // And then using the saved context
});
});
}

Answer 2

this happens because you are losing your this context inside forEach call
as docs says you can pass additional parameter to forEach, which is thisArg:
componentDidMount() {
let ifaces = os.networkInterfaces();
Object.keys(ifaces).forEach(function (ifname) {
...
}, this);
}