Bonjour,
J'ai une page qui va faire un map d'un tableau situé dans le store listStore.
Le problème c'est que map ne s'exécute qu'une seule fois. Comment faire pour qu'a chaque ajout dans la liste ToDoList j'ai à nouveau mon listStore.TodoList.map qui se réexécute ?
Mon Page:
Mon store :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 import React,{useState,useEffect} from 'react'; import { TextInput, TouchableOpacity, View, Text, StyleSheet,Button,ScrollView } from 'react-native'; import {listStore} from '../../store/TaskLisStore' const DoneScreen = (props) => { const{navigation}=props; return( <View style={{flex:1}}> <View style={{flex:0.1}}> <Text>Tâche faite</Text> </View> <ScrollView style={{flex:0.8}} contentContainerStyle={{flexGrow:0}}> { listStore.TodoList.map(element=> {//la partie qui devrait s'exécuter à chaque ajout dans la liste return( <View key={1} style={{borderWidth:1,marginTop:'5%',marginLeft:"2.5%",marginRight:"2.5%"}}> <Text style={{width:'100%',borderWidth:1,fontSize:15,fontWeight: "bold"}}>{element.GetTitle()}</Text> <Text style={{width:'100%',borderWidth:1,fontSize:15}}>{element.GetDesc()}</Text> </View> )}) } </ScrollView> {/* </SafeAreaView> */} <View style={{flex:0.1,marginTop:'5%',backgroundColor:"#901oao" }}> <Button title="Ajouter une tâche" onPress={()=>{ navigation.navigate("addTask")}} /> </View> </View> ) } export default DoneScreen
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 import {observable,action, makeObservable} from 'mobx' class ListStore { TodoList=[]; DoneList=[]; InProgressList=[]; //TODO addTodo=(Task)=>{ this.TodoList.push(Task) } deleteTodo=(index)=>{ this.TodoList.splice(index, 1) } //DONE addDone=(Task)=>{ this.DoneList=Task; } deleteDone=(index)=>{ this.DoneList.splice(index, 1) } //InProgress addInProgress=(Task)=>{ this.InProgressList=Task; } deleteInProgres=(index)=>{ this.InProgressList.splice(index, 1) } constructor(){ makeObservable(this,{ TodoList:observable, DoneList:observable, InProgressList:observable, addTodo:action, addDone:action, addInProgress:action, deleteTodo:action, deleteDone:action, deleteInProgres:action, }); } } const listStore = new ListStore(); export {listStore};
Partager