Witam wszystkich. Mam problem z odczytaniem wartości props.location.state.username i props.location.state.partnerToken, które przekazuję z komponentu Login do HomeScreen poprzez komponent Redirect. Wartości zwracają undefined.
Login.js
import React, { useEffect, useState } from "react";
import {
TextInput,
Text,
StyleSheet,
View,
BackHandler,
TouchableHighlight,
Image,
} from "react-native";
import { withRouter, Redirect } from "react-router-native";
import global from "./style";
import firebase from "firebase";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";
function Login(props) {
const [partnerUsername, setPartnerUsername] = useState(
"Your partner username..."
);
const [username, setUsername] = useState("");
const [partnerUsernameError, setPartnerUsernameError] = useState(false);
const [partnerToken, setPartnerToken] = useState("");
const [redirect, setRedirect] = useState(false);
let propusername = props.location.state.username;
useEffect(() => {
console.log(
"Imie:" +
props.location.state.name +
"Username:" +
props.location.state.username
);
setUsername(props.location.state.username);
const backAction = () => {
props.history.push("/"); //wracamy do glownej
return true; //musimy zreturnowac true -> patrz dokumentacja
};
const backHandler = BackHandler.addEventListener(
//obsluga hardwarowego back buttona (tylko android)
"hardwareBackPress",
backAction
);
return () => backHandler.remove(); // przy odmontowywaniu
}, []);
const handleOnPress = () => {
console.log("Partner username to find: " + partnerUsername);
const ref = firebase.database.ref();
var partnerToken;
ref.child("usernames/" + partnerUsername).once("value", (snapshot) => {
// jesli partner istnieje to wez jego token
if (snapshot.exists()) {
let data = snapshot.val();
partnerToken = data.token;
saveUserToDb(partnerToken);
} else {
setPartnerUsernameError(true);
error = true;
}
});
function saveUserToDb(partnerToken) {
firebase
.auth()
.signInAnonymously()
.then(() => {
console.log("User signed in anonymously");
firebase
.database
.ref("/users/" + firebase.auth().currentUser.uid)
.update({
id: firebase.auth().currentUser.uid,
name: props.location.state.name,
username: username,
partnerUsername: partnerUsername,
partnerToken: partnerToken,
})
.then(() => {
console.log(
"Data updated. and: username is: " +
username +
"partner topken is:" +
partnerToken
);
setPartnerToken(partnerToken);
setRedirect(true);
})
.catch((error) => {
console.error(error);
});
})
.catch((error) => {
if (error.code === "auth/operation-not-allowed") {
console.log("Enable anonymous in your firebase console.");
}
console.error(error);
});
}
};
let [fontsLoaded] = useFonts({
"GreatVibes-Regular": require("./assets/fonts/GreatVibes-Regular.ttf"),
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
return (
<View style={styles.container}>
<Text style={[styles.textHeader, { fontFamily: "GreatVibes-Regular" }]}>
Enter your partner username
</Text>
<TextInput
style={styles.input}
value={partnerUsername}
onChangeText={(e) => {
setPartnerUsername(e);
}}
/>
<TouchableHighlight onPress={() => handleOnPress()}>
<Image source={require("./assets/arrowRight.png")} />
</TouchableHighlight>
{partnerUsernameError && (
<Text style={{ color: "red" }}>
Partner username is not valid. Please try again.
</Text>
)}
{redirect && (
<Redirect
to={{
pathname: "/HomeScreen",
state: { username: propusername },
}}
/>
)}
</View>
);
}
}
export default withRouter(Login);
const styles = StyleSheet.create({
container: {
display: "flex",
alignItems: "center",
paddingTop: "59%",
height: "100%",
backgroundColor: global.primaryColor,
},
textHeader: {
color: global.secondaryColor,
fontSize: 48,
marginBottom: "10%",
textAlign: "center",
},
input: {
width: "75%",
height: 60,
color: global.secondaryColor,
fontSize: 18,
padding: 16,
marginBottom: "45%",
borderRadius: 100,
borderWidth: 1,
borderColor: global.secondaryColor,
},
});
Odczytuję to w komponencie HomeScreen:
useEffect(() => {
console.log("LOCATION STATE:" + props.location.state.username);
}, []);
Dziwne jest to, że gdy zmienną redirect w komponencie Login zmieniam defaultowo na true, wykonuje się redirect i mogę normalnie odczytać wartości. Jednak gdy zmienna jest ustawiona na false i zmieniam ją dopiero w funkcji SaveToDb to wartości zwracają undefined. Jaki może być tego powód bo kończą mi się pomysły?
Probowałem użyc hooka useLocation. Redirecta zamieniałem na props.history.push. Probowałem zmieniać lokalizację tego Redirecta w kodzie. Tak jak wspominałem wartości w HomeScreenie mogę odczytać tylko wtedy gdy redirect wykonuje się od razu, a nie jeśli jest robiony warunkowo. Routy w App.js wyglądają okej. Używam react native router do nawigacji.
Bardzo proszę o pomoc, nie daje mi spokoju ten problem :/
