onChangeText 在本机反应中给出错误

Question

我有以下代码

   import React from 'react';
   import { StyleSheet,Text,View,SafeAreaView,ScrollView ,Image ,TextInput} from 'react-native';     
   import  Entypo  from 'react-native-vector-icons/Entypo';
   import { Neomorph } from 'react-native-neomorph-shadows';

export const HomeScreen = ({ navigation }) => {
  state = {
    fname : "",
    sname : "",
  }
  
  return(  <SafeAreaView style={{ alignSelf: "stretch" }}>
            <View style={styles.card}>
              <Neomorph style={styles.neomorph} >
                <Text style={styles.input_title}>First Name</Text>
                  <Neomorph inner style={styles.input} >
                  <TextInput
                    style={{ borderColor: 'transparent', borderWidth: 1 ,width: "100%" ,borderRadius: 8,height: 50,paddingLeft: 10,fontSize: 18,fontWeight:"bold",color:"#ffffff"}}
                    onChangeText={(nextValue) => this.setState({fname: nextValue})}
                    value={this.state.fname}
                  />
                  </Neomorph>
              </Neomorph>
            </View>
            <View style={styles.card}>
              <Neomorph style={styles.neomorph} >
                <Text style={styles.input_title}>Second Name</Text>
                  <Neomorph inner style={styles.input} >
                  <TextInput
                    style={{ borderColor: 'transparent', borderWidth: 1 ,width: "100%" ,borderRadius: 8,height: 50,paddingLeft: 10,fontSize: 18,fontWeight:"bold",color:"#ffffff"}}
                    onChangeText={(nextValue) => this.setState({sname: nextValue})}
                    value={this.state.sname}
                  />
                  </Neomorph>
              </Neomorph>
            </View>
 </SafeAreaView>
)
}

onChangeText 我收到这样的错误

TypeError: _this.setState is not a function. (In '_this.setState({
          fname: nextValue
        })', '_this.setState' is undefined)

谁能帮我解决这个问题 提前致谢

Answer 1

您正在使用功能组件，因此那里不支持状态。

您可以切换到基于类的组件，如下所示

export class HomeScreen extends Component {
  state = {
    fname : "",
    sname : "",
  }
  
  render()
{
 //return jsx
}
}

或者使用下面的 useState 钩子

export const HomeScreen = ({ navigation }) => {
  const [fname,setfname] = React.useState("");
  
  return()
}

你可以使用 setfname("value") 来设置值。