无法理解如何使用React Native useEffect

如何解决无法理解如何使用React Native useEffect

我在React Native应用程序中有一个登录视图：

array.prototype.splice()

调用cartItems.find( ( item,i ) => { if ( item == this_id ) { cartItems.splice( i,1 ); return true; } return false; } ); 时，问题出在函数import React,{useState,useContext,useEffect} from 'react'; import {View,StyleSheet} from 'react-native'; import {Button,TextInput,Headline} from 'react-native-paper'; import globalStyles from '../styles/global'; import axios from 'axios'; import AsyncStorage from '@react-native-community/async-storage'; import AuthContext from '../context/auth/authContext'; const Login = ({navigation,route}) => { const [email,setEmail] = useState(''); const [password,setPassword] = useState(''); const {user,setUser} = useContext(AuthContext); const setLocalStorageUser = async (user) => { try { await AsyncStorage.setItem('user',user); } catch (error) { console.log(error); } }; const handleNewUserPress = () => { navigation.navigate('Signup'); } const handleLoginPress = async () => { try { const loginData = { username: email,password: password,} responseData = await axios.post(loginURL,loginData); setLocalStorageUser('user',{email: email,token: responseData.token}); useEffect(() => { setUser({email: email,token: responseData.token}); },[]); } catch (error) { console.log(error); } navigation.navigate('Home'); } return ( <View style={globalStyles.container}> <TextInput style={styles.input} value={email} label="Email" onChangeText={(text) => setEmail(text)} /> <TextInput style={styles.input} value={password} label="Contraseña" onChangeText={(text) => setPassword(text)} /> <Button style={styles.button} mode='contained' onPress={() => handleLoginPress()} disabled={email=='' || password==''} > Enviar </Button> <Button icon="plus-circle" onPress={() => handleNewUserPress()}> Nuevo Usuario </Button> </View> ); } const styles = StyleSheet.create({ input: { marginBottom: 20,backgroundColor: 'transparent' },button: { marginBottom: 20 } }) export default Login; 中。我收到此错误：

handleLoginPress()

我不知道为什么会这样以及如何解决它。

解决方法

首先，您需要了解useEffect钩子的作用。根据文档：

效果挂钩可让您在功能组件中执行副作用

import React,{ useState,useEffect } from 'react';

function Example() {
  const [count,setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

之所以创建它，是因为我们没有办法管理功能组件内部的状态。我们需要将组件转换为类，并使用诸如componentDidMount或componentDidUpdate之类的生命周期方法。

---

对于您而言，您不需要使用useEffect钩子，因为单击按钮登录时将执行操作。

您希望在以下情况下使用useEffect

：

• 您需要获取数据
• 您需要检查用户是否已登录
• 等...

, 在返回您的jsx之前，

useEffect在主函数中被称为函数，但不在您在主函数中声明的其他函数或函数箭头的内部。就您而言：

import {Button,TextInput,Headline} from 'react-native-paper';
import globalStyles from '../styles/global';
import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';
import AuthContext from '../context/auth/authContext';

const Login = ({navigation,route}) => {
  const [email,setEmail] = useState('');
  const [password,setPassword] = useState('');

  const {user,setUser} = useContext(AuthContext);

  useEffect(() => {
     setUser({email: email,token: responseData.token});
  },[]);
  
  const setLocalStorageUser = async (user) => {
    try {
      await AsyncStorage.setItem('user',user);
    } catch (error) {
      console.log(error);
    }
  };

  const handleNewUserPress = () => {
    navigation.navigate('Signup');
  }

  const handleLoginPress = async () => {
    try {
      const loginData = {
        username: email,password: password,}
      responseData = await axios.post(loginURL,loginData);

      setLocalStorageUser('user',{email: email,token: responseData.token});


      
    } catch (error) {
      console.log(error);
    }

    navigation.navigate('Home');
  }

  return (
    <View style={globalStyles.container}>
      <TextInput style={styles.input} value={email} label="Email" onChangeText={(text) => setEmail(text)} />
      <TextInput style={styles.input} value={password} label="Contraseña" onChangeText={(text) => setPassword(text)} />
      <Button 
        style={styles.button} 
        mode='contained' 
        onPress={() => handleLoginPress()}
        disabled={email=='' || password==''}
      >
        Enviar
      </Button>
      <Button icon="plus-circle" onPress={() => handleNewUserPress()}>
        Nuevo Usuario
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    marginBottom: 20,backgroundColor: 'transparent'
  },button: {
    marginBottom: 20
  }
})

export default Login;

致谢

,

您不需要在beforeEach中使用useEffect：

handleLoginPress

,

如错误所述：您只能在功能组件中设置useEffect，不允许在功能组件内部的功能表达式内使用useEffect。最好的解决方案是，如果要管理useEffect，则必须在组件函数的主体中处理并更新状态以触发它。