如何将参数从 AsyncStorage 传递给函数 React Native

Question

我有一个登录页面。在那里，用户输入数据并提交给 API。 API 给出了这样一个用户的答案，并从数据库中为他提供了一个 id。我把这个 id 写在存储中。接下来，用户被带到主页。有一个组件负责获取用户名（以及所有其他数据）组件的本质： 1 参数接收一个id并将其形成一个json请求。 2 参数将此请求发送到API并在响应中接收用户的数据（如果id匹配） 3) return 绘制界面并从 API 响应

中提供用户数据

问题：更改账号（或重新登录）时，报json请求错误（其实API不接受空请求，所以拒绝了）获得身份证的要点是 100%。当应用程序再次更新时，id 原来是在 json 中生成的，之后我已经获得了有关用户的数据。

如何解决？其实它必须先接收到id，然后才发送id，接收数据，但是，在第一次进入应用的时候，他并不想马上接收到id，而是重启后才接收到（ctlr + VS 代码中的 s)

//LOGIN.js

import React, { Component } from 'react';
import { View, Pressable, Text, TextInput, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import styles from './style';


export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email : '',
      password : '',
      check_textInputChange : false,
      secureTextEntry : true,
      id : '',
     };
  }

  componentDidMount(){
    this._loadInitialState().done();
  }

//Сheck that the user with id does not throw out on the authorization screen when exiting the application:

  _loadInitialState = async () => {
    var id = await AsyncStorage.getItem('id');
    if (id !== null) {
      this.props.navigation.navigate("HomeScreen")
      this.id = id
    }
  }

  InsertRecord () {
    var Email = this.state.email;
    var Password = this.state.password;

    if ((Email.length==0) || (Password.length==0)){
      alert("Missing a required field!");
    }else{
      var APIURL = "http://10.0.2.2:8080/SignIn/login.php";

      var headers = {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
      };
            
      var Data ={
        Email: Email,
        Password: Password
      };

      fetch(APIURL,{
        method: 'POST',
        headers: headers,
        body: JSON.stringify(Data)
      })
      .then((Response)=>Response.json())
      .then((Response)=>{
        alert(Response[0].Message)
        if (Response[0].Message == "Success") {
          console.log(Response[0].Message)
          // eslint-disable-next-line react/prop-types
          AsyncStorage.setItem('id',Response[0].Id);
          this.props.navigation.navigate("HomeScreen");
          console.log(Response[0].Id);
        }
        console.log(Data);
      })
      .catch((error)=>{
        console.error("ERROR FOUND" + error);
      })
    }
  }

  updateSecureTextEntry(){
    this.setState({
      ...this.state,
      secureTextEntry: !this.state.secureTextEntry
    });
  }

  render() {
    return (
      <View style={styles.viewStyle}>
          <View style={styles.action}>
            <TextInput
              placeholder="Enter Email"
              placeholderTextColor="#ff0000"
              style={styles.textInput}
              onChangeText={email=>this.setState({email})}
              />
          </View>

          <View style={styles.action}>
            <TextInput
              placeholder="Enter Pass"
              placeholderTextColor="#ff0000"
              style={styles.textInput}
              secureTextEntry={this.state.secureTextEntry ? true : false}
              onChangeText={password=>this.setState({password})}
              />
                <TouchableOpacity
                  onPress={this.updateSecureTextEntry.bind(this)}>
                </TouchableOpacity>  
          </View>


                {/* Button */}

                <View style={styles.loginButtonSection}>    
                  <Pressable
                    style={styles.loginButton} 
                    onPress={()=>{
                      this.InsertRecord()
                    }}
                    >
                      <Text style={styles.text}>Войти</Text>
                  </Pressable>
                </View>
      </View>
    );
  }
}

//INFOSTATUS.js

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, TouchableOpacity, SafeAreaView, FlatList, StyleSheet, Button, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native'
import AsyncStorage from '@react-native-async-storage/async-storage';

function InfoStatus() {
    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);
    const [idUser, setIdUser] = useState();

//check ID  
    const idcheck = async () => {
        try {
          const get = await AsyncStorage.getItem('id')
          setIdUser (get)
        } catch(e) {
          // read error
        }
      }

//Sending data to api and getting user data

    const getNotifications = async () => {
        const send = {
            id:idUser
        }
     try {
      const response = await fetch('http://10.0.2.2:8080/InfoStatus/InfoStatus.php', {
        method: 'POST', 
        body: JSON.stringify(send), 
        headers: {
          'Content-Type': 'application/json'
        }
      });
      const data = await response.json();
      setData(data);
      console.log(data);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }
  
   useEffect(() => {
    idcheck();
    getNotifications();
  }, []);

  //Initialization of received data

const Item = ({ name, middlename,status,number,city }) => (

   <View style={StyleInfo.container}>
    <View style={StyleInfo.container2}>
    <Text style={StyleInfo.TextStyle}> Dear, </Text>
    <Text style={StyleInfo.TextStyleData} key ={name}> {name} {middlename} </Text> 
    </View>
    <View style={StyleInfo.container2}>
    <Text style={StyleInfo.TextStyle}> Number: </Text>
    <Text style={StyleInfo.TextStyleData}key ={number}> № {number} </Text> 
    <TouchableOpacity 
         onPress={() =>
            navigation.navigate('InfoParser')
            }
          >
           <Text style={StyleInfo.ButtonAdress}>Find out the address</Text>
        </TouchableOpacity>
    </View>
    <View style={StyleInfo.container2}>
    <Text style={StyleInfo.TextStyle}> Status: </Text>
    <Text style={StyleInfo.TextStyleData} key ={status}> {status} </Text> 
    </View>
    <View style={StyleInfo.container2}>
    <Text style={StyleInfo.TextStyle}> City: </Text>
    <Text style={StyleInfo.TextStyleData} key ={city}> {city} </Text> 
    </View>
       <TouchableOpacity 
         style={StyleInfo.Button}
         onPress={() =>
            navigation.navigate('InfoParser')
            }
          >
           <Text style={StyleInfo.TextButton}>Get contacts of friends</Text>
        </TouchableOpacity>
    </View>
    
    );
  
  const renderItem = ({ item }) => (
    <Item name={item.name} middlename={item.middlename} status={item.status} yik={item.yik} elections={item.elections} />
    
  );
  
  return (
  <SafeAreaView>
  {isLoading ? <ActivityIndicator size="large" color="#00ff00"/> : (
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
  )}
    </SafeAreaView>
  );
}

const StyleInfo = StyleSheet.create({
    
    container:{
        width: 390,
        height: 190,
        borderWidth: 1,
        borderRadius: 2,
        marginLeft: 10,
        marginBottom: 10,
        backgroundColor: '#E9E9E9',
    },
    container2:{
        flexDirection: "row",
    },
    TextStyle: {
        fontFamily: 'Raleway',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontSize: 18,
        marginTop: 5,
        marginLeft: 5,
        bottom: 10,
        top: 10
    },
    TextStyleData: {
        fontSize: 18,
        marginTop: 5,
        top: 10,
        fontWeight: 'bold',
    },
    ButtonAdress: {
        fontSize: 18,
        marginTop: 5,
        marginLeft: 20,
        top: 10,
        color: "#ff0000",
    },
    Button: {
    width: 310,
    height: 40,
    marginTop: 10,
    marginLeft: 5,
    bottom: 10,
    borderWidth: 1,
    borderRadius: 2,
    top: 10,
    alignSelf: 'center',
    backgroundColor: "#ff0000",
    },
    TextButton: {
    marginTop: 5,
    fontSize: 16,
    alignSelf: 'center',
    fontWeight: 'bold',
    color: 'white',
    
    }
}
)

export {InfoStatus}

PS: 我还发现一件事，当我尝试通过 async / await 获取 id 时，最有可能的一点是它没有时间在渲染之前获取值。我有运行个想法，我想收到更多其他建议

PSS: 我也知道，其实即使我通过navigator传值，我也会传到homescreen。虽然我的 InfoStatus 嵌入在主屏幕中，但我需要以某种方式在那里传递此参数。

尽管总的来说这个问题让我很感兴趣，因为我到处都需要这个参数。因此，找到一个通用的解决方案会很酷。

Answer 1

我不是 100% 确定我理解这个问题，所以在这里我会给你一些提示。

你可以这样导航的时候传递参数：

navigation.navigate('somescreen', {
            param: 86,
            otherParam: 'myBestFriendTheParam',
          })

在下一个屏幕上，您必须从 route.params 中阅读它。

您可以使用 redux 在应用程序打开并用户登录时获取您的用户数据吗？这基本上可以为您提供所需的数据。
如果 async/wait 不起作用，为什么不像在其余代码中那样使用 then-chains？

如何将参数从 AsyncStorage 传递给函数 React Native

How to pass parameter from AsyncStorage to function React Native

javascript

react-native

asyncstorage