Mettre a jour un tableau React à partir des props

Par Geek Boy (GeekBoy), il y a 6 ans

Javascript

Bonjour, je débute dans React avec React native , je rencontre un problème, je récupère un produit dans le screen fiche produit , et ensuite, je passe à un autre écran "créer repas" en appuyant sur le bouton

<Button transparent onPress={() => Actions.creerrepas({ produit: this.state.produit }) } >

, je voudrais pouvoir ajouter dans le state produits qui est dans le screen "CreerRepasScreen " tous les produits que j'ai ajouté, le produit, je le récupère dans this.props.produit , mais je ne ce n'est pas comment mettre à jour le state produits , pour qu'il ajoute en fur est a mesure les produits ajouter

"ECRAN FICHE PRODUIT"

class FicheProduitScreen extends Component { static navigationOptions = { header: null }; constructor(props) { super(props); this.state = { produit: [], codebar: this.props.codebar, productName: [], productImageUrl: "", proteins: [], sels: [], sucres: [], sodium: [], glucides: [], calories: [], vendeur: [], loading: true }; } componentDidMount() { axios .get( "https://fr.openfoodfacts.org/api/v0/produit/" + this.state.codebar + ".json" ) .then(response => { this.setState({ loading: false, productName: response.data.product.product_name_fr, productImageUrl: response.data.product.image_front_url, proteins: response.data.product.nutriments.proteins, sels: response.data.product.nutriments.salt, sucres: response.data.product.nutriments.sugars_value, sodium: response.data.product.nutriments.sodium, glucides: response.data.product.nutriments.carbohydrates, calories: response.data.product.nutriments.energy, vendeur: response.data.product.brands_tags, produit: response.data.product }); let productName = this.state.productName; let productImageUrl = this.state.productImageUrl; let produit = [ { productName: productName, productImageUrl: productImageUrl } ]; this.setState({ produit: produit }); }) .catch(error => console.log(error)); } render() { return ( <Container> <Header> <Left> <Button transparent onPress={Actions.ajouterproduit}> <Image source={require("../assets/icones/ico-left.png")} style={styles.icon} /> </Button> </Left> <Body> <Title style={styles.headerTitle}>Fiche produit</Title> </Body> <Right> <Button transparent onPress={() => Actions.creerrepas({ produit: this.state.produit }) } > <Image source={require("../assets/icones/ico-add.png")} style={styles.icon} /> </Button> </Right> </Header> {this.state.loading ? ( <Spinner color="blue" /> ) : ( <FicheProduit productName={this.state.productName} productImageUrl={this.state.productImageUrl} proteins={this.state.proteins} sels={this.state.sels} sucres={this.state.sucres} sodium={this.state.sodium} glucides={this.state.glucides} calories={this.state.calories} vendeur={this.state.vendeur} /> )} <NavTabs /> </Container> ); } }

"Ecran Créer repas"

class CreerRepasScreen extends Component { constructor(props) { super(props); this.state = { loading: false, produits:[] }; } static navigationOptions = { header: null }; render() { return ( <Container> <Header> <Left> <Button transparent onPress={Actions.mesrepas}> <Image source={require("../assets/icones/ico-cancel.png")} style={styles.icon} /> </Button> </Left> <Body> <Title style={styles.headerTitle}>Créer votre repas</Title> </Body> <Right> <Button transparent onPress={Actions.ajouterproduit}> <Image source={require("../assets/icones/ico-add-ingredients.png")} style={styles.icon} /> </Button> </Right> </Header> <ScrollView style={styles.container}> <Content> {this.state.produits ? ( this.state.produits.map((produit, index) => ( <CardProduit name={produit.productName} key={index} /> )) ) : ( <Text>Pas de produits</Text> )} </Content> </ScrollView> <NavTabs /> </Container> ); } }

6 réponses

Defy, il y a 6 ans

je dirait comme ça redux, ca va te permettre de créer un store qui contiendra des data et partager ces data au travers d'action dans tout tes composants.

Geek Boy (GeekBoy), il y a 6 ans

je chercher plus simple que Redux mais bon je vais essayer

Defy, il y a 6 ans

C'est pas compliqué redux et c'est super mega efficace pour repondre a ce genre de problématique.

Alban Lautie, il y a 6 ans

Tu as Mobx qui est plus simple. Mais en vrais ce système de store est fait pour répondre à des problèmatiques de grosse application. L'auteur de Redux avait écrit un article sur Médium il expliquait quand utilisé Redux et comment faire sans. Sinon regarde api context de React ça répond au soucis de données partagés entre composant. C'est implémenté de base dans react plus besoin de Redux ou Mobx. Après si tu peux détaillé ce qu'il y'a derrière ta variable "Action" là on ne sait pas trop.

Defy, il y a 6 ans

Oui, j'ai pas pensé a l'API context, apres quand j'ai nomé redux c'est surtout pour le concept, parceque tu peut tres facilement implémenter un systeme comme redux mais en beaucoup plus simple en suivant juste les recommandation de flux et c'est toujour intéréssant d'avoir une architecture robuste, meme si ton app est pas grosse. Perso je bosse avec angular plus qu'avec react et l'architecture d'une app angular meme simple reste la meme qu'une app hyper complexe. Parceque j'ai une libe perso qui fait comme redux avec rxjs et qui me sert de point central pour gere meme un site web via angular.

Geek Boy (GeekBoy), il y a 6 ans

Merci pour vos conseils , je vais voir du coté de API context