postData = async () => {
this.setState({loading: true});
var location = await AsyncStorage.getItem('location');
var path = await AsyncStorage.getItem('path');
var post_type = await AsyncStorage.getItem('post_type');
var userId = await AsyncStorage.getItem('userID');
var newPath = path.split("/");
var imageName = newPath[newPath.length-1];
const formData = new FormData();
var media = {
uri: path,
name: imageName,
type: 'image/jpg',
};
formData.append('image', media);
formData.append('user', userId);
formData.append('description',this.state.description);
formData.append('location',"usa");
formData.append('post_type',post_type);
formData.append('userprofile_picture',imageName);
fetch(strings.baseUri+"addPosts",{
method: 'POST',
headers: { 'Content-Type': 'multipart/form-data' },
body: formData,
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {
this.props.navigation.popToTop()
&& this.props.navigation.navigate('Home'); // This navigates me to the HomeScreen
}
else {
}
})
.catch((error) => {
console.error(error);
});
}
4 Réponses :
componentDidUpdate () est appelé lorsque l'état est changé (appelant setState () ) et si vous le faites dans le showPosts qui est également à l'intérieur du componentDidUpdate () vous créez une mise à jour d'état infinie.
alors que dois-je faire?
Ajoutez une condition if pour vérifier si vous avez déjà affiché les messages afin d'éviter d'appeler à nouveau la méthode. Ou utilisez la méthode de cycle componentDidMount
Si vous souhaitez mettre à jour les publications chaque fois qu'une autre variable change (comme userId), j'utiliserais une variable appelée shouldUpdatePosts et la définirais sur true lorsque cette variable change, sinon sur false.
Mais dans mon cas, si j'utilise componentDidUpdate () {if (this.state.data! = Null) this.showPosts (); } alors il continuera d'appeler car je veux que ma liste soit mise à jour à chaque fois que l'écran d'accueil est chargé
Ok, vous avez besoin d'une variable qui change lorsque vous passez d'un écran à l'autre et en fonction de cela, vous chargez les messages.
Le componentDidUpdate ne continuerait-il pas à se mettre à jour de toute façon?
De même, je vous recommande de jeter un coup d'œil sur Epics en utilisant la gestion de l'état Redux. Est-ce la bonne façon de faire cela: redux-observable.js.org/docs /basics/Epics.html
ComponentDidUpdate est une mise à jour de LifeCycle Hook , elle sera déclenchée lorsque quelque chose est changé dans le composant State ou Props .
Venir à votre code: Vous appelez un gestionnaire showPosts à setState , qui déclenchera à nouveau le cycle de vie de la mise à jour.
Cela conduira à une boucle infinie.
Solution
Si vous souhaitez charger les messages uniquement la première fois, passez au crochet du cycle de vie Créatif ( componentDidMount ).
componentDidMount() { // This just gets called once in creational lifecycle //
this.showPosts(); }
si vous voulez que cela ait toujours les dernières données, alors il y a deux façons
shouldComponentUpdate Oui, vous pouvez certainement l'utiliser pour vérifier les données et la charge si nécessaire, mais soyez prudent en utilisant cette mise à jour de vos composants dépend du code dans ceci. p >
Veuillez vérifier https://reactjs.org/docs/react-component. html # shouldcomponentupdate
Praveen pouvez-vous s'il vous plaît me donner un petit code de démonstration sur la façon dont je peux implémenter cela dans mon cas?
@shubhamBhist J'ai mis à jour ma réponse, essayez de passer à componentDidMount (si vous souhaitez charger les données au départ uniquement)
Praveen Je veux appeler showPosts chaque fois que mes données sont mises à jour. Est-ce que votre chemin est le bon dans ce cas?
d'où ces données changent-elles? Je veux dire à partir de quel composant est le changement? est ce composant dans la même branche d'arborescence de composants?
Cela vient d'un écran différent. Composant différent
Puis-je ne pas le faire sans Redux?
continuons cette discussion dans le chat .
Vous avez juste besoin d'appeler cela de cette manière si vous le faites dans ComponentDidUpdate et mettez à jour l'état dans l'appel de méthode par ComponentDidUpdate puis une boucle infinie démarre.
componentDidUpdate(prevProps, prevState) {
// only update if not match I don't know what's your data is so add a
// simple check like we use for strings.
if (prevState.data !== this.state.data) {
this.showPosts();
}
}
================ MODIFIE ======================= p >
Si vous souhaitez utiliser uniquement ComponentDidUpdate , vous pouvez l'utiliser comme.
componentDidMount () {
this.showPosts();
}
Utilisez simplement prevState pour correspondre.
Oui, alors que dois-je faire?
Vous remplacez simplement votre méthode ComponentDidUpdate par componentDidMount () {this.showPosts (); }
mais je veux que mes données soient mises à jour chaque fois que cet écran est appelé
Mon exigence - j'ai un écran d'accueil. Et ci-dessous se trouve un onglet appelé AddPost sur lequel je clique et là s'ouvre un nouvel écran, où je capture une image et l'envoie à mon api. Dès que l'image est envoyée à l'API, mon écran revient à l'écran d'accueil et je veux que le dernier clic d'image soit affiché sur l'écran d'accueil
Vérifiez ma réponse modifiée si vous remplissez une difficulté, faites-le moi savoir.
Non. Avec ta réponse, ça ne fait rien.
S'il vous plaît laissez-moi savoir le comportement actuel si vous n'obtenez pas le même résultat quel est le problème maintenant.
Avec la condition si vous m'avez recommandé, les données ne sont plus mises à jour
Veuillez imprimer console.log ("prevState.data", prevState.data); et console.log ("this.state.data", this.state.data); et partagez le résultat avec moi.
Veuillez imprimer avant si la condition dans la méthode componentDidUpdate .
Vous pouvez également le faire
Composant parent commun
Créez un nouveau composant, par exemple Posts
import React, { Component } from 'react';
import HomeScreen from '../../HomeScreen';
import ImageDescription from '../../ImageDescription';
class Posts extends Component {
constructor(){
super();
this.state = {
dataEditted: false;
}
}
newDataHandler = () =>{
this.setState({dataEditted:true}); // this is flag to identify that there is change in data //
}
resetnewDataHandler = () =>{
this.setState({dataEditted:false}); // this handler is used to reset the falg back to initial //
}
render () {
const homeScreen = <HomeScreen editted={this.state.editted} resetHandler={this.resetnewDataHandler}/>;
const imageDescription = <ImageDescription newdataHandler={this.resetnewDataHandler}/>
return (
<div>
{homeScreen}
{imageDescription}
</div>
)
}
}
export default Posts;
Ce composant va servir de pont pour déplacer les données entre eux.
Chaque fois qu'il y a de nouvelles données dans le composant ImageDescription , utilisez le newDataHandler passé a props pour mettre à jour le parent commun, alors le dataEditted sera mis à jour et transmis a props à homeScreen Component , maintenant dans ce componentDidUpdate de homeScreen vérifiez si c'est vrai , puis appelez this.showPosts () et appelez également resetnewDataHandler.
Merci pour votre réponse. Mais ce code m'a aidé. componentDidMount () {this.props.navigation.addListener ('willFocus', () => {this.showPosts ();}); }
@shubhamBisht sûr
Pouvez-vous s'il vous plaît vérifier notre salle de chat aussi. Je t'ai envoyé un texto là-bas
pouvez-vous me montrer un petit exemple d'utilisation de componentDidUpdate avec ses paramètres par défaut prevProps, prevState . TIA :)