0
votes

request fonctionne avec Postman mais pas avec axios.post

J'ai créé un formulaire d'inscription dans React-js avec axios.post (). La demande fonctionne parfaitement via Postman, ce qui rend le backend sans culpabilité, mais je n'ai aucune réaction dans mon composant.

L'utilisation de Try / catch ou de finally () n'a aucun effet. je n'ai aucune erreur dans la console. Toutes mes variables sont définies comme suit:

handleSubmit(event) {
    if (this.state.email === this.state.email02
        && this.state.passwd === this.state.passwd02
        && this.state.lastname !== '') {
        const data = {
            email: this.state.email,
            passwd: this.state.passwd,
            lastname: this.state.lastname,
            firstname: this.state.firstname
        }
        const config = {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }

        axios.post('http://104.XX.YY.192:8081/register', data, config)
            .then(response => {
                this.props.history.push('/SignIn');
            })
            .catch(err => {
                console.log(err);
            })
    } else if (this.state.email !== this.state.email02) {
        console.log('email are not the same');
    } else if (this.state.passwd !== this.state.passwd02) {
        console.log('password are not the same');
    }
}

la partie problème: (le (if / else) fonctionne correctement et la redirection vers / SignIn fonctionne ailleurs)

constructor(props) {
    super(props);
    this.state = {
        passwd: ''
    }
}

onFieldChange(fieldName) {
    return function (event) {
        this.setState({[fieldName]: event.target.value});
    }
}

render() {
    return (
        [...]
        <form onSubmit={() => this.handleSubmit()}>
        <input type="password" value={this.state.passwd}
               onChange={this.onFieldChange('passwd').bind(this)} 
               placeholder="* Password" required />
            <button type="submit">Sign-up</button>
        </form>
        [...]

J'ai hâte de vous entendre.

p >

reactjs axios postman post request

2 commentaires

Quelle erreur affiche-t-il dans le navigateur? ou l'url est connectée mais la réponse est emoty?

il n'y a en fait aucune erreur. c'est pourquoi je suis coincé.

4 Réponses :

0
votes

Puisque vous n'avez pas donné le bon journal des erreurs, vous ne pouvez pas obtenir le problème exact. Donc, vous fournir l'un de mes codes de travail. Cela peut aider. Cet extrait de code prend l'URL, puis publie les données. Ici, vous pouvez rencontrer un problème CORS. Si oui, alors dans package.json, écrivez -

"proxy": " http://192.128.1.210:8080 "

et installez http-middleware-proxy. Cela fonctionnera très bien:

const user = {
  name: this.state.name
};

axios.post(`https://jsonplaceholder.typicode.com/users`, {
    user
  })
  .then(res => {
    console.log(res);
    console.log(res.data);
  })
}

Avec l'axios one, voici l'un des exemples que vous pouvez essayer:

export function PostData(userData) {
  var targetUrl = '/report' /* /register in your case.*/
  return new Promise((resolve, reject) => {
    fetch(targetUrl, {
        method: 'POST',
        headers: {
          'Content-Type': "application/json; charset=utf-8",
          "Accept": "application/json"
        },
        body: JSON.stringify({
          "requestData": {
            "userName": userData.username,
            "password": userData.password,
            "clientId": "ptm",
            "txnType": "GDR"
          }
        })
      })
      .then(response => response.json())
      .then((responseJson) => {
        resolve(responseJson)
      })
      .catch((error) => {
        reject(error)
      })
  })

p >

1 commentaires

Essayez également de consoler votre réponse que vous devez vérifier si la réponse est là ou si elle attrape une erreur. Utilisez la console.log partout possible en cas d'ambiguïté.

0
votes

Vérifiez vos espaces, virgules, guillemets, en particulier les espaces lors de la définition des en-têtes, tandis que dans Postman vous l'écrivez dans les cases mais lorsque vous codez en dur dans l'éditeur de code, vous avez parfois mal orthographié ou mis un espace supplémentaire contre et cela peut provoquer des erreurs < / p>

0 commentaires

2
votes

J'ai finalement trouvé la solution par moi-même. la balise 'form' recharge la page après l'envoi de la requête. Changer le formulaire en balises div résout mon problème.

1 commentaires

Par souci de sémantique, vous pouvez toujours conserver votre formulaire dans votre balisage, mais lors de la soumission, appelez la méthode event.preventDefault () afin d'empêcher votre formulaire de recharger la page.

0
votes

J'ai eu un problème similaire apparemment ma fonction de connexion acceptée 2 cordes, mais je passais un objet JSON de 2 chaînes, je devais apporter des modifications dans le contrôleur API

créé une classe de connexion P>

 public String Post(UserLogin ul){}

0 commentaires