javascript - Unexpected Token in a React Native Project - Stack Overflow

admin管理员组

文章数量:1327689

I am trying to use this Binding context when calling ES6 method. How to access object from within method called as callback? as a guide to refactor from the book's ES5 to ES6; however, I can't seem to track down my unexpected token problem. These files both given me an issue right after the constructor function finishes. Any help is appreciated.

WeatherProject.js

class WeatherProject extends Component {
constructor(props) {
 super(props);
 this.state = { zip: '',
 forecast: null};
},

_handleTextChange(event){
 let zip = event.nativeEvent.text;
 this.setState({zip: zip});
 fetch('.5/weather?q='
  + zip + '&units=imperial')
  .then((response) => response.json())
  .then((responseJSON) => {
    console.log(responseJSON);
    this.setState({
      forecast: {
        main: responseJSON.weather[0].main,
        description: responseJSON.weather[0].description,
        temp: responseJSON.main.temp
      }
    })
  })
  .catch((error) => {
    console.warn(error);
  })
},

render() {
 let content = null;
 if (this.state.forecast !== null) {
  content = <Forecast
              main={this.state.forecast.main}
              description={this.state.forecast.description}
              temp={this.state.forecast.temp}/>;
}

return (
  <View style={styles.container}>
    <Image source={require('image!flowers')}
          resizeMode= 'cover'
          style={styles.backdrop}>
    <View style={styles.overlay}>
      <View style={styles.row}>
        <Text style={styles.mainText}>
          Current weather for
        </Text>
        <View style={styles.zipContainer}>
        <TextInput
          style={[styles.zipCode,styles.mainText]}
          returnKeyType='go'
          onSubmitEditing={this._handleTextChange} />
        </View>
      </View>
      {content}
    </View>
    </Image>
  </View>
);
}
}

Forecast.js

 class Forecast extends Component {
   constructor(props) {
   super(props);
   this.state = {
   zip: '',
   forecast: {
   main: 'Clouds',
   description: 'few clouds',
   temp: 45.7
 }
};
},
render() {
 return (
  <View>
    <Text style={styles.bigText}>
      {this.props.main}
    </Text>
    <Text style={styles.mainText}>
      Current conditions: {this.props.description}
    </Text>
    <Text style={styles.mainText}>
      {this.props.temp} F
    </Text>
  </View>
 );
}
}

I am trying to use this Binding context when calling ES6 method. How to access object from within method called as callback? as a guide to refactor from the book's ES5 to ES6; however, I can't seem to track down my unexpected token problem. These files both given me an issue right after the constructor function finishes. Any help is appreciated.

WeatherProject.js

class WeatherProject extends Component {
constructor(props) {
 super(props);
 this.state = { zip: '',
 forecast: null};
},

_handleTextChange(event){
 let zip = event.nativeEvent.text;
 this.setState({zip: zip});
 fetch('http://api.openweathermap/data/2.5/weather?q='
  + zip + '&units=imperial')
  .then((response) => response.json())
  .then((responseJSON) => {
    console.log(responseJSON);
    this.setState({
      forecast: {
        main: responseJSON.weather[0].main,
        description: responseJSON.weather[0].description,
        temp: responseJSON.main.temp
      }
    })
  })
  .catch((error) => {
    console.warn(error);
  })
},

render() {
 let content = null;
 if (this.state.forecast !== null) {
  content = <Forecast
              main={this.state.forecast.main}
              description={this.state.forecast.description}
              temp={this.state.forecast.temp}/>;
}

return (
  <View style={styles.container}>
    <Image source={require('image!flowers')}
          resizeMode= 'cover'
          style={styles.backdrop}>
    <View style={styles.overlay}>
      <View style={styles.row}>
        <Text style={styles.mainText}>
          Current weather for
        </Text>
        <View style={styles.zipContainer}>
        <TextInput
          style={[styles.zipCode,styles.mainText]}
          returnKeyType='go'
          onSubmitEditing={this._handleTextChange} />
        </View>
      </View>
      {content}
    </View>
    </Image>
  </View>
);
}
}

Forecast.js

 class Forecast extends Component {
   constructor(props) {
   super(props);
   this.state = {
   zip: '',
   forecast: {
   main: 'Clouds',
   description: 'few clouds',
   temp: 45.7
 }
};
},
render() {
 return (
  <View>
    <Text style={styles.bigText}>
      {this.props.main}
    </Text>
    <Text style={styles.mainText}>
      Current conditions: {this.props.description}
    </Text>
    <Text style={styles.mainText}>
      {this.props.temp} F
    </Text>
  </View>
 );
}
}

• javascript
• react-native

Share Follow asked Mar 29, 2016 at 0:26 jaysigjaysig 7111 gold badge22 silver badges77 bronze badges 1

• 1 Can you post the error that you are receiving please. – David Commented Mar 29, 2016 at 0:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Remove the ma at the end of each function. In ES6 syntax, mas are no longer needed after function

Invalid node version can also be a reason for this issue

https://github./facebook/react-native/issues/34768#issuement-1261364555

本文标签： javascriptUnexpected Token in a React Native ProjectStack Overflow