反应本机：.！ 错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用

Question

The error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   de of the body of a function component. This could happen for one of the following reasons:
4. You might have mismatching versions of React and the renderer (such as React DOM)
5. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. ERROR TypeError: null is not an object (evaluating 'dispatcher.useState') ERROR Invariant Violation: "main" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

• A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

My code

**import * as React from 'react';
import {useState} from 'react';
import { Text, StyleSheet, 
KeyboardAvoidingView, ScrollView, Image,
TextInput, TouchableOpacity, View } from 'react-native';
import { CheckBox } from 'react-native-elements';
import {Ionicons} from '@expo/vector-icons'

const [input, setInput] = useState('');
const [hidePass, setHidePass] = useState(true);
export default class App extends React.Component {
 

    constructor(props) {
      super(props);
      this.state = {
          ischecked1: true
      };
  }
    onChangeCheck1() {
      this.setState({ ischecked1: !this.state.ischecked1 });
    }
    render() {
      
        return (
          
            <KeyboardAvoidingView
            style={styles.container}
             >
            <ScrollView>
              
                <Image
                    source={require('./assets/logo.png')}
                    style={styles.logo}
                    />
                <Text style={styles.helloText}> 
                Olá de novo !
                </Text>
               <Text style={styles.welcomeText}>
                  Bem-vindo(a) de volta,
                  sentimos sua falta! 
                </Text>
               
                <TextInput
                style={styles.inputArea}
                placeholder="Digite o e-mail"
                />
                <TextInput
                style={styles.inputArea}
                placeholder="Senha"
                value={input}
                onChangeText={ (texto) => setInput(texto)}
                secureTextEntry={hidePass}
                />
                <TouchableOpacity style={styles.eye} onPress={ () =>
                   setHidePass(!hidePass) }>
                  <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                   color="#A0D800" size={25}/>
                </TouchableOpacity>
                <View style={styles.checkBoxStyle}>
                <CheckBox
                  left
                  size={18}
                  checkedColor='#A0D800'
                  value={this.state.ischecked1}
                  checked={this.state.ischecked1}
                  onPress={this.onChangeCheck1.bind(this)}
                  containerStyle={{ backgroundColor: "transparent",
                  borderColor: "transparent", marginRight: 0}}
                />
              <Text style={styles.Connected}> 
                Manter-se conectado
              </Text>
                <Text style={styles.forgotPassword}> 
                  Esqueci minha senha
                </Text>
                
                </View>
                
          
                <TouchableOpacity 
                    style={styles.botao}
                    /*onPress={ () => {this.clicou()} }*/
                >
                    <Text style={styles.botaoText}>Entrar</Text>
                </TouchableOpacity>
                
                
            </ScrollView>
            </KeyboardAvoidingView>
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    logo: {      
        marginTop:50,
        marginBottom: 80,
        width: 150,
        height: 40,
        
    },
    inputArea:{
       marginTop: 30,
       padding: 15,
       height: 60,
       width: 370,
       borderColor: '#808080',
       borderWidth: 1,
       backgroundColor: '#fff',
       fontSize: 16,
       fontWeight: 'bold',
       borderRadius: 15
    },
    botao: {
        width: 350,
        height: 60,
        backgroundColor: '#000000',
        marginTop: 50,
        marginLeft: 8,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    botaoText: {
      fontSize: 15,
      fontWeight: 'bold',
      color: '#fff'
    },
    helloText: {
      fontSize: 40,
      fontWeight: 'bold',
      marginTop: 15,
      color: '#000000',
      marginEnd: 120,
      marginTop: 8
    },
    welcomeText: {
      fontSize: 16,
      marginTop: 10,
      marginEnd: 35,
      marginVertical: 10,
      color: '#808080',
    },
    forgotPassword: {
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      marginBottom: 15,
      marginLeft: 30,
      fontSize: 12
    },
    Connected:{
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      fontSize: 12,
      marginRight: 55,
      marginLeft: -5
    },
    checkBoxStyle:{
      marginTop: 15,
      flexDirection: 'row',
      marginStart: -10
   },
   eye:{
   alignSelf: 'flex-end',
   bottom: 42,
   right: 40
   }
})**

Answer 1

The error is pretty straight forward. You have a class extending React.Component, and you define a state in the constructor, why would you need the useState hook? You have to choose one or the other, function components using hooks, or class components. Functions starting by useXXX are hooks, it's a naming convention.

See here for more information about hooks: https://reactjs.org/docs/hooks-intro.html

Taken from this page:

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Removing the 2 lines above your class declaration should fix the problem.

Please people correct me if I'm wrong, but it seems to me that you can't use both because of how React keeps track of states, needing a single reference to the value to watch.

Hope I helped.

Answer 2

You have to choose between class component or functional component.

Here, you have a class component, but useState can be used only in a functional component.

I have rewritten your component as functional, you can try to replace all you component by this:

import * as React from 'react';
import {useState} from 'react';
import { Text, StyleSheet, 
KeyboardAvoidingView, ScrollView, Image,
TextInput, TouchableOpacity, View } from 'react-native';
import { CheckBox } from 'react-native-elements';
import {Ionicons} from '@expo/vector-icons'

const App = () => {
const [input, setInput] = useState('');
const [hidePass, setHidePass] = useState(true);
const [ischecked1, setIschecked1] = useState(true)

const onChangeCheck1 = () => {
    setIschecked1(!ischecked1)
}
  
return (
    
    <KeyboardAvoidingView
        style={styles.container}
    >
        <ScrollView>
            <Image
                source={require('./assets/logo.png')}
                style={styles.logo}
            />
            <Text style={styles.helloText}> 
                Olá de novo !
            </Text>
            <Text style={styles.welcomeText}>
                Bem-vindo(a) de volta,
                sentimos sua falta! 
            </Text>
            
            <TextInput
                style={styles.inputArea}
                placeholder="Digite o e-mail"
            />
            <TextInput
                style={styles.inputArea}
                placeholder="Senha"
                value={input}
                onChangeText={ (texto) => setInput(texto)}
                secureTextEntry={hidePass}
            />
            <TouchableOpacity style={styles.eye} onPress={ () => setHidePass(!hidePass) }>
                <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                    color="#A0D800" size={25}
                />
            </TouchableOpacity>
            <View style={styles.checkBoxStyle}>
                <CheckBox
                    left
                    size={18}
                    checkedColor='#A0D800'
                    value={ischecked1}
                    checked={ischecked1}
                    containerStyle={{ backgroundColor: "transparent",
                    borderColor: "transparent", marginRight: 0}}
                />
                <Text style={styles.Connected}> 
                    Manter-se conectado
                </Text>
                <Text style={styles.forgotPassword}> 
                    Esqueci minha senha
                </Text>
            </View>
            
            <TouchableOpacity 
                style={styles.botao}
                /*onPress={ () => {this.clicou()} }*/
            >
                <Text style={styles.botaoText}>Entrar</Text>
            </TouchableOpacity>
        </ScrollView>
    </KeyboardAvoidingView>
);

}
const styles = StyleSheet.create({
container: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
},
logo: {      
    marginTop:50,
    marginBottom: 80,
    width: 150,
    height: 40,
    
},
inputArea:{
   marginTop: 30,
   padding: 15,
   height: 60,
   width: 370,
   borderColor: '#808080',
   borderWidth: 1,
   backgroundColor: '#fff',
   fontSize: 16,
   fontWeight: 'bold',
   borderRadius: 15
},
botao: {
    width: 350,
    height: 60,
    backgroundColor: '#000000',
    marginTop: 50,
    marginLeft: 8,
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center'
},
botaoText: {
  fontSize: 15,
  fontWeight: 'bold',
  color: '#fff'
},
helloText: {
  fontSize: 40,
  fontWeight: 'bold',
  marginTop: 15,
  color: '#000000',
  marginEnd: 120,
  marginTop: 8
},
welcomeText: {
  fontSize: 16,
  marginTop: 10,
  marginEnd: 35,
  marginVertical: 10,
  color: '#808080',
},
forgotPassword: {
  textDecorationLine: 'underline',
  fontWeight: 'bold',
  marginTop: 15,
  marginBottom: 15,
  marginLeft: 30,
  fontSize: 12
},
Connected:{
  textDecorationLine: 'underline',
  fontWeight: 'bold',
  marginTop: 15,
  fontSize: 12,
  marginRight: 55,
  marginLeft: -5
},
checkBoxStyle:{
  marginTop: 15,
  flexDirection: 'row',
  marginStart: -10
},
eye:{
alignSelf: 'flex-end',
bottom: 42,
right: 40
}
})