react-native requete fetch en get dynamique

Par Alaindu18, il y a 8 ans


Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire
identification pour l'aacces a une application

import React from 'react'; import { View,Text, Image, TextInput, Button,Alert,StyleSheet } from 'react-native'; import styles from '../StylesPersos/Styles-Login'; import { StackNavigator } from 'react-navigation'; import Accueil from '../Pages/Accueil' class TestSimple extends React.Component { constructor (props) { super(props) this.componentDidMount = this.componentDidMount.bind(this) this.state = { isLoading: true, result: '', Nom: '', Prenom: '', report: null } } getLogin(value) { this.setState({ Login:value }); } getPassword(value) { this.setState({ password:value }); } componentDidMount() { var Param1 = 'Login='; var Param2 = 'Mdp='; var Saisie1 = "Alain"; var Saisie2 = "toto"; var Url = 'https://www.dudule.fr/Login.php?'+Param1+Saisie1+'&'+Param2+Saisie2; fetch(Url) .then((response) => response.json()) .then((responseJson) => { console.log(responseJson) this.setState({ result: responseJson.result, Nom: responseJson.Nom, Prenom: responseJson.Prenom }); }) .catch((error) => { console.error(error); }) if(this.state.result == '0') { Alert.alert('saisie erronée'); } else { Alert.alert('salut '+this.state.Nom); } } render() { return ( <View style={styles.container}> <View style={{}}> <View style = {{marginTop: 15}}> <TextInput style={styles.formInput} placeholder = 'Login' onChangeText={(value) => {this.getLogin(value)}} underlineColorAndroid = "transparent" /> </View> <View style = {{marginTop: 15}}> <TextInput style={styles.formInput} placeholder = 'password' secureTextEntry={true} onChangeText={(value) => {this.getPassword(value)}} underlineColorAndroid = "transparent" /> </View> <View style = {{marginTop: 15}}> <Button onPress={() => {this.componentDidMount()}} title="Valider" color="#841584" accessibilityLabel="Learn more" /> </View> </View> </View> ); } } export default StackNavigator({ TestSimple: { screen: TestSimple }, Accueil: { screen: Accueil }, }) Entourez votre code pour bien le mettre en forme

Ce que je veux

Le fonctionnement actuel est correct, mais je souhaite envoyer a 'componentDidMount', le résultat des 2 saisies Login et password.
Afin de remplacer Saisie1 et Saisie2

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(
Pas d'erreurs mais rendre dynamique ce code.

14 réponses

betaWeb, il y a 8 ans

Salut,

Premièrement, la méthode componentDidMount() n'a pas vocation a être appelée lors d'un event.
De plus, ta logique en général n'est pas bonne.
Pour ton questionnement, il te suffit de créer une méthode et de passer les paramètres soit en arguments soit directement via le state de ton application :

constructor (props) { super(props) /* ... */ this.state = { /* ... */ login: null, password: null } } setLogin (login) { this.setState({ login }); } setPassword (password) { this.setState({ password }) } async fetchData () { var Param1 = 'Login=' /* ??? */ var Param2 = 'Mdp=' /* ??? */ const { pogin, password } = this.state var Url = 'https://www.dudule.fr/Login.php?'+Param1+login+'&'+Param2+password const response = await fetch(Url) const json = await response.json() if (json.status === 200) return json return null } componentDidMount () { this.setState({ login: 'Alain', pwd: 'toto' }) const data = await this.fetchData() if (data !== null) this.setState({ result: data.result, Nom: data.Nom, Prenom: data.Prenom }) } render() { const { login, password } = this.state return ( <View style={styles.container}> <View style={{}}> <View style = {{marginTop: 15}}> <TextInput style={styles.formInput} placeholder = 'Login' value={login} onChangeText={(value) => this.getLogin(value)} underlineColorAndroid = "transparent" /> </View> <View style = {{marginTop: 15}}> <TextInput style={styles.formInput} value={password} placeholder = 'password' secureTextEntry={true} onChangeText={(value) => this.getPassword(value)} underlineColorAndroid = "transparent" /> </View> <View style = {{marginTop: 15}}> <Button onPress={() => this.fetchData()} title="Valider" color="#841584" accessibilityLabel="Learn more" /> </View> </View> </View> ) }

Je n'ai pas testé ce code, je te laisse voir et corriger le cas échéant.

Alaindu18, il y a 8 ans

Merci pour ta réponse,
j'ai des erreurs partout "await is a reserved word".

betaWeb, il y a 8 ans

ah mince, tu dev via quel environnement ? Tu as utilisé un CLI pour générer ton projet ?

Alaindu18, il y a 8 ans

non expo xde

Alaindu18, il y a 8 ans

pc w10 i3 qui rame

betaWeb, il y a 8 ans

Tu devrais installer react-native-cli afin d'initialiser ton projet plus simplement et plus proprement :

npm i -g react-native-cli react-native init <nom_de_ton_app>

Sur quelle version de NodeJs tournes-tu ?

Alaindu18, il y a 8 ans

Je vais essayer de résoudre mon problème actuel, et ensuite je regarde ça.
Merci pour le conseil.

betaWeb, il y a 8 ans

Je t'en prie, tu ne m'as pas répondu quant à la version de NodeJS que tu utilises ;)

Alaindu18, il y a 8 ans

dsl, node version : v6.11.0

betaWeb, il y a 8 ans

Ok c'est étonnant que async/await ne fonctionne pas ...

Ci-dessous le code mis à jour sans async/await (non testé, je te laisse déboguer, surtout pour les promises, je ne suis pas sûr de moi) :

constructor (props) { super(props) /* ... */ this.state = { /* ... */ error: null, login: null, password: null } } setLogin (login) { this.setState({ login }); } setPassword (password) { this.setState({ password }) } async fetchData () { var Param1 = 'Login=' /* ??? */ var Param2 = 'Mdp=' /* ??? */ const { pogin, password } = this.state var Url = 'https://www.dudule.fr/Login.php?'+Param1+login+'&'+Param2+password return fetch(Url) .then(response => response.json()) .then(data => { if (data.status === 200) this.setState({ result: data.result, Nom: data.Nom, Prenom: data.Prenom }) else this.setState({ error: 'Une erreur est survenue' }) }) .catch(err => this.setState({ error: `Une erreur est survenue : ${ err }` })) .then(() => this.setState({ isLoading: false })) } componentDidMount () { this.setState({ login: 'Alain', pwd: 'toto' }) this.fetchData() } render() { const { login, password } = this.state return ( <View style={styles.container}> <View style={{}}> <View style = {{marginTop: 15}}> <TextInput style={styles.formInput} placeholder = 'Login' value={login} onChangeText={(value) => this.getLogin(value)} underlineColorAndroid = "transparent" /> </View> <View style = {{marginTop: 15}}> <TextInput style={styles.formInput} value={password} placeholder = 'password' secureTextEntry={true} onChangeText={(value) => this.getPassword(value)} underlineColorAndroid = "transparent" /> </View> <View style = {{marginTop: 15}}> <Button onPress={() => this.fetchData()} title="Valider" color="#841584" accessibilityLabel="Learn more" /> </View> </View> </View> ) }
Alaindu18, il y a 8 ans

le code fonctionne correctement, si je supprime ton test ' if (data.status === 200),

Un console.log('status '+data.status); me donne ' status undefined'

betaWeb, il y a 8 ans

Ok, essaye alors ce code là :

return fetch(Url) .then(response => { if (response.status === 200) response.json().then(data => { if (data) this.setState({ result: data.result, Nom: data.Nom, Prenom: data.Prenom }) }) else this.setState({ error: 'Une erreur est survenue' }) }) .catch(err => this.setState({ error: `Une erreur est survenue : ${ err }` })) .then(() => this.setState({ isLoading: false })) }
Alaindu18, il y a 8 ans

Je viens de trouver, ce n'est pas data.status mais response.status qui effectivement me donne 200
Pour moi c ok.
Encore merci de ta disponibilité.
Alain

betaWeb, il y a 8 ans

Je t'en prie :)
Passe ton sujet à résolu stp ;)