关于 React Native App 中的 this.state 函数答案

【问题标题】：About this.state function in React Native App关于 React Native App 中的 this.state 函数
【发布时间】：2020-03-18 09:11:15
【问题描述】：

您好，这是我的代码。当我尝试填充文本框时，错误来了，即（'this.setState 不是一个函数。（在 this.setState({emal:email)} this.setState is underfined'）。

这是我的代码：

从“反应”导入反应；进口 { 图片，平台，滚动视图，样式表，文本，可触摸不透明度，看法，文本输入，可触摸高亮，提醒，

} 来自'react-native';

导出默认函数 LoginScreen() {

  onClickListener = (viewId) => {
    Alert.alert("Alert", "You can't "+viewId);
  }

返回 ( https://png.icons8.com/message/ultraviolet/50/3498db'}}/> this.setState({email})}/>

  <View style={styles.inputContainer}>
    <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
    <TextInput style={styles.inputs}
        placeholder="Password"
        secureTextEntry={true}
        underlineColorAndroid='transparent'
        onChangeText={(password) => this.setState({password})}/>
  </View>

  <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => this.onClickListener('login')}>
    <Text style={styles.loginText}>Login</Text>
  </TouchableHighlight>

  <TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('restore_password')}>
      <Text>Forgot your password?</Text>
  </TouchableHighlight>

  <TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('register')}>
      <Text>Register</Text>
  </TouchableHighlight>
</View>

); }

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#DCDCDC',
},
inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius:30,
    borderBottomWidth: 1,
    width:250,
    height:45,
    marginBottom:20,
    flexDirection: 'row',
    alignItems:'center'
},
inputs:{
    height:45,
    marginLeft:16,
    borderBottomColor: '#FFFFFF',
    flex:1,
},
inputIcon:{
  width:30,
  height:30,
  marginLeft:15,
  justifyContent: 'center'
},
buttonContainer: {
  height:45,
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom:20,
  width:250,
  borderRadius:30,
},
loginButton: {
  backgroundColor: "#00b5ec",
},
loginText: {
  color: 'white',
}
});

【问题讨论】：

标签： react-native expo

【解决方案1】：

这就是问题

export default function LoginScreen()

改成

export default class LoginScreen extends Component

【讨论】：

你能格式化你的代码吗？把所有的东西都放在```里，因为我看不懂你展示了什么。你的 this.setState({email}) 在哪里？

【解决方案2】：

为了使用状态，它必须是有状态的组件而不是无状态的组件，所以你必须将你的功能组件更改为类。

改变

export default function LoginScreen()

到

export default class LoginScreen extends React.Component

【讨论】：

【解决方案3】：

在 react-native setState 函数中有语法

this.setState({someField:someValue})

你在这里使用了错误的语法，你必须给出状态名称和值

this.setState({email})
this.setState({password})

这些行应该像 -

this.setState({ email: value })
this.setState({password: value })

【讨论】：

【解决方案4】：

如果你想使用函数式组件，你可以像这样使用 UseState 钩子通过导入和初始化状态，如下所示：

 import React,{useState} from 'react'; 
    export default function LoginScreen() {
    const [email,setEmail]=useState(initialValues);
    //setEmail function can be used for changing the state
    }

use可以在这里看到useState的用法[https://reactjs.org/docs/hooks-state.html]

希望对你有帮助

【讨论】：

【解决方案5】：

如果你想使用功能组件，请使用react hooks，否则使用下面的类组件。

import React, { Component } from 'react';
import { Image, StyleSheet, Text, View, TextInput, TouchableHighlight, Alert } from 'react-native';

export default class LoginScreen extends Component {

  onClickListener = viewId => {
    Alert.alert('Alert', "You can't " + viewId);
  };

  render() {
    return (
      <View>
        <View style={styles.inputContainer}>
          <Image
            style={styles.inputIcon}
            source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}
          />
          <TextInput
            style={styles.inputs}
            placeholder="Password"
            secureTextEntry={true}
            underlineColorAndroid="transparent"
            onChangeText={password => this.setState({password})}
          />
        </View>

        <TouchableHighlight
          style={[styles.buttonContainer, styles.loginButton]}
          onPress={() => this.onClickListener('login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => this.onClickListener('restore_password')}>
          <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => this.onClickListener('register')}>
          <Text>Register</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DCDCDC',
  },
  inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  inputs: {
    height: 45,
    marginLeft: 16,
    borderBottomColor: '#FFFFFF',
    flex: 1,
  },
  inputIcon: {
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: 'center',
  },
  buttonContainer: {
    height: 45,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
  },
  loginButton: {
    backgroundColor: '#00b5ec',
  },
  loginText: {
    color: 'white',
  },
});

【讨论】：