Mise à jour affichage list
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:
Code:
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 |
Mon store :
Code:
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}; |