react-native - ReactNative 问题与构造函数说';' 错误

Question

这是我想要实现添加国家和地区下拉列表的代码。我在 7,8 行遇到错误，说缺少分号。我需要帮助，因为我是 reactnative 的初学者。

import React,{ Component } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
import { StyleSheet, Text, TextInput, View } from 'react-native';

export default function App extends Component() {
  constructor(props) {
    super(props);
    this.state = { country: '', region: '' };
  };
  selectCountry=(val)=>{
    this.setState({ country: val });
  };

  selectRegion=(val)=>{
    this.setState({ region: val });
  };
  const { country, region } = this.state;
  return (
    <View style={styles.container}>
      <View style={styles.line}>
        <Text style={styles.text}>Enter name:</Text>
        <TextInput 
        style={styles.input}
        placeholder='e.g. John Doe'
        />
      </View>
      <View style={styles.line}>
        <Text style={styles.text}>Enter Age:</Text>
        <TextInput 
        keyboardType='numeric'
        style={styles.input}
        placeholder='2'
        />
      </View>
      <View style={styles.line}>
        <Text style={styles.text}>Enter Country:</Text>
        <CountryDropdown
          value={country}
          onValueChange={(val) => this.selectCountry(val)} />
      </View>
      <View style={styles.line}>
        <Text style={styles.text}>Enter Region:</Text>
        <RegionDropdown
          country={country}
          value={region}
          onValueChange={(val) => this.selectRegion(val)} />
      </View>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
    alignItems:'center',
    justifyContent:'center',
  },
  line:{
    flexDirection:'row',
    flex:0,
    marginBottom:5,
  },
  text:{
    flex:1,
  },
  input:{
    flex:1,
    width:70,
    borderBottomWidth:1,
    borderBottomColor:'#777',
  },
  
});

///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ////////////////////

标签： react-native

Answer 1

您正在使用类组件，但将其称为函数....

更改导出默认函数 App extends Component() { 以导出默认类 App extends Component(){

还添加一个带有适当括号的 render() 函数

下面的新代码

import React,{ Component } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
import { StyleSheet, Text, TextInput, View } from 'react-native';

export default class App extends Component() { <-- change here
  constructor(props) {
    super(props);
    this.state = { country: '', region: '' };
  };
  selectCountry=(val)=>{
    this.setState({ country: val });
  };

  selectRegion=(val)=>{
    this.setState({ region: val });
  };
  render() { <-- add here
    const {country, region} = this.state;

    return (
      <View style={styles.container}>
        <View style={styles.line}>
          <Text style={styles.text}>Enter name:</Text>
          <TextInput
            style={styles.input}
            placeholder='e.g. John Doe'
          />
        </View>
        <View style={styles.line}>
          <Text style={styles.text}>Enter Age:</Text>
          <TextInput
            keyboardType='numeric'
            style={styles.input}
            placeholder='2'
          />
        </View>
        <View style={styles.line}>
          <Text style={styles.text}>Enter Country:</Text>
          <CountryDropdown
            value={country}
            onValueChange={(val) => this.selectCountry(val)}/>
        </View>
        <View style={styles.line}>
          <Text style={styles.text}>Enter Region:</Text>
          <RegionDropdown
            country={country}
            value={region}
            onValueChange={(val) => this.selectRegion(val)}/>
        </View>

      </View>
    );
  } <-- add here
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#fff',
    alignItems:'center',
    justifyContent:'center',
  },
  line:{
    flexDirection:'row',
    flex:0,
    marginBottom:5,
  },
  text:{
    flex:1,
  },
  input:{
    flex:1,
    width:70,
    borderBottomWidth:1,
    borderBottomColor:'#777',
  },

});