React Native(Expo)报Login.setUser is not a function且不改导出方式的解决方法

结论 #

可以在不改变现有默认导出类组件的前提下解决该问题。

错误原因 #

你当前的代码存在两个核心问题：

• 你单独定义的Login函数组件里的setUser是React Hooks返回的局部方法，只在Login函数组件内部生效，不属于Login函数对象的静态属性，直接调用Login.setUser必然会报不是函数的错误。
• 你默认导出的App类组件和这个单独的Login函数组件没有任何关联，定义的Login函数完全没有被使用，状态也不可能打通。

修复方案 #

1. 删除多余的Login函数组件定义，这段代码属于无效逻辑
2. 在App类组件中用类组件原生的状态管理方式存储用户名、密码信息，替换Hooks的用法
3. 把onChangeText的回调改成修改类组件自身的state

修改后的完整代码如下：

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

export default class App extends Component {
  // 初始化类组件状态
  state = {
    user: '',
    password: ''
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.titulo}>
          BOM DENTE
        </Text>

        <Image
          style={styles.logo}
          source={require('../assets/icon.png')}
        />

        <TextInput
          style={styles.input}
          placeholder="Nome de usuário"
          value={this.state.user}
          onChangeText={text => this.setState({user: text})}
        />

        <TextInput
          style={styles.input}
          secureTextEntry={true}
          placeholder="Senha"
          value={this.state.password}
          onChangeText={text => this.setState({password: text})}
        />

        <TouchableOpacity
          style={styles.botao}
        >
          <Text style={styles.botaoText}>
            LOGIN
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

// 保留你原有styles定义即可，无需修改
const styles = StyleSheet.create({
  // 你的原有样式逻辑
})

后续需要读取登录输入值时，直接访问this.state.user和this.state.password即可正常使用。

内容的提问来源于stack exchange，提问作者Carlos Eduardo Alvarez