I write React class constructor use es6, but there is a red highlight error in webstorm9 editor
here is the part of code:
class AssetSelectDialog extends React.Component {
static propTypes = {
data: React.PropTypes.any,
pageState: React.PropTypes.string,
pageStatus: React.PropTypes.string,
handleCancel: React.PropTypes.func,
handleSave: React.PropTypes.func
};
constructor(props) {
super(props);
this.PAGE_STATUS = {
SHOW: 'SHOW',
SELECT: 'SELECT'
};
this.state = {
data: this.props.data || {},
pageState: this.props.pageState || CONST.STATUS.EDIT,
pageStatus: this.props.pageStatus || this.PAGE_STATUS.SHOW
};
}
there error was found in super(props); and the message is Superclass constructor invocation should be in constructor body.
the code is run ok in babel., how can I fixed it?
It's a bug in WebStorm, WEB-14601 is fixed in WebStorm 10.0.4
Related
Specifically at points such as this
componentDidMount() {
this._getCoords();
}
the "{" which comes before this._getCoords is marked as wrong. As is the "{" after
constructor(props)(
super(props);
this._getCoords = this._getCoords.bind(this);
this.state = {
position: null
};
Is there any reason for this? Instead of accepting the { as valid, it says a ) is expected instead.. But when I put in that suggestion the code obviously breaks.
I have tried to use tools such as "ES7 React/Redux/GraphQL/React-Native snippets", "React-Native/React/Redux snippets for es6/es7", and "React Native Tools"... But none of them seem to allow me to properly write React Native code.
I've attempted to turn extensions on and off without much difference being seen. It seems like VSCode wants me to purely code in JavaScript
constructor(props)(
super(props);
this._getCoords = this._getCoords.bind(this);
this.state = {
position: null
};
componentDidMount() {
this._getCoords();
}
As previously state the general error I am seeing is ";" expected or ") expected" instead of accepting the appropriate syntax of React Native. Additionally, although this is more visual, the color-coded nature of various commands isn't appearing.
Edit
import {MapView } from 'react-native-maps';
constructor(props){
super(props);
this._getCoords = this._getCoords.bind(this);
this.state = { position: null };
}
componentDidMount() { this._getCoords(); }
When you include a constructor, you must use middle brackets instead of small brackets.
( => { // { instead of (
JavaScript is based on Java and is an object-oriented language. Therefore, you create objects in the class. To use the constructor, you must use a class.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
position: null
};
}
componentDidMount() {
this._getCoords();
}
_getCoords() {
alert("_getCoords")
}
render() {
return(<View><Text>Basic Screen </Text> </View>);
}
}
please help;
I've got an error "undefined is not an object (evaluating 'this.props.client')
class FeedProfileBottom extends Component {
_onLogoutPress = function() {
this.props.client.resetStore();
return this.props.logout();
}
render() {
return (
<Root>
<LogOutButton onPress={this._onLogoutPress}>
<LogOutText>
Logout
</LogOutText>
</LogOutButton>
</Root>
);
}
}
export default withApollo(connect(undefined, { logout })(FeedProfileBottom));
You might need to explicitly bind the scope of your component to your function.
class FeedProfileBottom extends Component {
constructor (props) {
super(props);
this._onLogoutPress = this._onLogoutPress.bind(this);
}
// ...
I'm keep getting the following error when executing the React Native code below.
Link to Error Screenshot
I've tried various ways to define the actionEnum object but nothing seems to work. Please help!
import React from "react";
import {
View,
Text,
StyleSheet,
TextInput,
Button,
AsyncStorage
} from "react-native";
class AddItem extends React.Component {
static navigationOptions = {
title: "Add item"
};
static actionEnum = {
init: 1,
add: 2,
update: 3,
delete: 4,
set: 5
};
constructor(props) {
super(props);
this.setStateHandler(this.actionEnum.add);
}
.....
JavaScript doesn't have static variables, only static methods. You can work around this by exporting your enum object from your module instead of making it part of your class, but if you really need it to be part of your class you can use a get accessor.
class AddItem extends React.Component {
static get navigationOptions() {
return {
title: "Add item"
};
}
static get actionEnum() {
return {
init: 1,
add: 2,
update: 3,
delete: 4,
set: 5
};
}
constructor(props) {
super(props);
this.setStateHandler(this.actionEnum.add);
}
Anyone can help me fix this error when using code modal sample in link https://facebook.github.io/react-native/docs/modal.html I can't understand why this error appear although i coded absolutely same code sample.
Use ES6 class. Constructor will work only on ES6 class.
class ModalExample extends React.Component {
constructor () {
super(props)
}
render () {
// code
}
}
If you don't want to use ES6 class, then use getInitialState to set the state.
var ModalExample = React.createClass ({
getInitialState: function() {
return {
modalVisible: false
}
}
})
Trying to follow the React Native tutorial with the Movies app.
Using iOS or Android everything goes fine until we try to introduce state into the component.
The tutorial does not use ES6 classes but the Hello World App does and this is where it gets confusing.
The tutorial says to add getIntialState which breaks I assume due to using ES6 classes, however using a constructor also does not seem to work so I wanted to know what is the correct way to proceed?
Tutorial
getInitialState: function() {
return {
movies: null,
};
},
ES6 Equivalent?
constructor(props) {
super(props);
this.state = {
movies: null,
};
},
Do not use the comma (,) after methods in the class!
class ListApp extends Component {
constructor(props){
super(props);
this.state = { loaded: false };
} //, <--- no comma!
...
...
...
}