Mettre a jour un tableau React à partir des props
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
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.
C'est pas compliqué redux et c'est super mega efficace pour repondre a ce genre de problématique.
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.
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.