Question

我有以下课程：

import React from 'react';
import { Text, View, TextInput, TouchableOpacity, Image } from 'react-native';
import {styles} from './Login.styles'
import { AuthContext } from '../../../context';



    export default class Login extends React.Component {
        state={
            email:"",
            password:""
        }
        
        render() {
        
        const { signIn } = React.useContext(AuthContext);

        return(
            <View style={styles.container}>
                <Text style={styles.logo}>Bienvenido :)</Text>
                <TouchableOpacity style={styles.loginBtn} onPress={() => signIn()}>
                    <Text style={styles.inText}>Ingresar</Text> 
                </TouchableOpacity>
            </View> 
        );
    }
}

我知道问题出在定义const {signIn}的那一行，但是我的问题是我不知道如何解决这个问题。

AuthContext看起来像这样：

import React from "react";

export const AuthContext = React.createContext();

有什么想法吗？我知道这是一个常见问题，我已经阅读了很多其他类似的问题，但是我不知道如何使它们在我的问题上起作用。

Answer 1

您不能在React Class组件内部使用钩子。

如果您希望使用useContext()挂钩，则需要将组件重构为功能组件。例如

export default function Login() {
  const { signIn } = React.useContext(AuthContext);

  const [email, setEmail]  = React.useState('');
  const [password, setPassword] = React.useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.logo}>Bienvenido :)</Text>
      <TouchableOpacity style={styles.loginBtn} onPress={() => signIn()}>
        <Text style={styles.inText}>Ingresar</Text> 
      </TouchableOpacity>
    </View> 
  )

无效的挂接调用。只能在函数体内调用钩子。尝试使用useContext

1 个答案: