Forum : react-native requete fetch en get dynamique

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

Réponse acceptée

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

betaWeb

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

Auteur

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

betaWeb

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

Alaindu18

Auteur

non expo xde

Alaindu18

Auteur

pc w10 i3 qui rame

betaWeb

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

Auteur

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

betaWeb

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

Alaindu18

Auteur

dsl, node version : v6.11.0

betaWeb

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

Auteur

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

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

betaWeb

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

Auteur

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