This repository was archived by the owner on Jun 26, 2020. It is now read-only.
This repository was archived by the owner on Jun 26, 2020. It is now read-only.
Inspector fails to display objects that use getters #893
Description
The property inspector breaks when looking at an object that uses getters to access properties set on this in its constructor.
I would expect the inspector to either ignore getter-based properties of objects or to display them properly. Instead, attempting to expand an object with getters in the inspector throws TypeError: Cannot read property '0' of undefined, displaying none of the object's other properties.
If I remove the get keyword from the function definition, the inspector works as expected. However, that changes how the underlying program works, which is obviously undesirable.
To reproduce, run create-react-app and then paste the following into App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class Breaker {
constructor() {
// Define a property in the constructor.
this.property = ['The devtools will break when twirling down the "breaker" property in the state inspector.'];
}
get value() {
// Use an attribute of that property in a getter.
return this.property[0];
}
}
class App extends Component {
constructor() {
super();
this.state = {
breaker: new Breaker()
};
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p>
Accessing the getter works just fine inside the application (as well it should).
</p>
<p>
{ this.state.breaker.value }
</p>
</div>
);
}
}
export default App;