J'ai une table avec des données:
Lorsque je clique sur Supprimer le bouton, je connais l'index et l'ID utilisateur qui ont ces données.
Je tiens à supprimer cet objet de "Timerecords" tableau et retourne "EmbleeheSist" sans elle.
J'ai essayé de mettre en œuvre cette fonction, mais sans résultat
3 Réponses :
Vous pouvez utiliser un P> .map () code> et un imbécile () code> comme ceci pour supprimer l'objet identifié. Le .MAP () est utilisé pour itérer les objets d'employé. Une fois qu'un employé avec une pièce d'identité correspondante est trouvé, nous avons ensuite itérale sur leurs Timerecords pour filtrer celui que nous souhaitons supprimer: Exemple de course ci-dessous: h2>
var array = [{id: 1, timeRecords: [{id: 5, hours: 2}, {id: 6, hours: 3}]}, {id: 2, timeRecords: [{id: 7, hours: 2}, {id: 8, hours: 3}]}]
const deleteRecords = (recordId, userId) => {
const newArr = array.map((item) => {
if(item.id == userId){
return {
...item,
timeRecords: item.timeRecords.filter((record) => record.id !== recordId)
}
} else {
return item
}
})
console.log(newArr)
}
deleteRecords(5, 1)
@vicbyte deux raisons. 1) Créer une nouvelle copie de l'employée. 2) Cela facilite l'identification de l'employé de la feuille de temps de l'employé que nous supprimons depuis que nous avons itérale sur chaque employé. J'ai envisagé simplement d'utiliser .Filter () -> .Filter () au début, mais je ne pense pas que la logique serait aussi propre.
@vicbyte c'est un problème spécifique très réagissant qui nécessite une nouvelle copie d'un tableau lors de la mise à jour de l'état. Si nous devions faire des mutations sur une valeur d'état existante (c.-à-d .: la liste des employés) sans créer d'abord un nouveau tableau, cela pourrait entraîner des effets secondaires inattendus. Bien que je reçois ce que vous voulez dire, pourquoi utiliser l'espace supplémentaire et la mémoire XD
En fait, nous n'avons pas besoin d'une nouvelle variable de tableau ici. C'est la même chose qui retourne des employés cartographiés ou en créant un nouveau. Depuis, nous ne faisons aucun état de muté directement dans le rappel de la carte. Nous filtrons les Timerecords et renvoyons un nouvel employé avec un nouveau record de temps à l'aide de la syntaxe Spread. En outre, carte crée des copies peu profondes :)
Les gars merci pour l'aide, mais c'est maintenant un autre problème, je vois le résultat sur la console.log mais non sur le site Web, si je veux voir le résultat, je dois passer à une autre URL et en arrière.
Avez-vous déjà mis à jour l'état avec le Newarr? @Vuzii
@Christophango Oui, lorsque je vois le résultat sur la console de réagissariat dans le navigateur, l'état après clic est mis à jour. Mais j'utilise un rendu = {accessoires =>
Non, je ne pense pas que c'est la question, pouvez-vous nous montrer votre code complet avec la nouvelle fonction?
Deleterecord = (Enregistrement, UserID) => {Laissez les employésList = ceci.state.emplelist; EmployésList = EmployésList.Map (Person => {IF (PERSON.ID == UserID) {Retour {... personne, Timerecords: PERSON.TIMERECORDS.FILTER (Enregistrement => Enregistrement.Id! == Enregistrement),};}; else {retour personne;}}); cette.SetState ({employésList}); };
@Vuzii Jetez un coup d'oeil à ce sable de sable. :). Cela pourrait vous donner un aperçu de la manière de faire fonctionner cela: Codesandbox.io/s/vigilant-aryabhata- YQ2W4
Va essayer de résoudre ce problème. Merci pour ton aide :)
deleteRecord = (recordID, userID) => {
const list = this.state.employeesList;
const index = list(v => v.id === userID)
const nestedList = list[index].timeRecords
const nestedIndex = nestedList.findIndex(v => v.id === recordID)
return [
...list.slice(0, index), // get items before the userID
{
...list[index], // fill other pros of userID
timeRecords: [ // remove item by recordID
...nestedList.slice(0, nestedIndex),
...nestedList.slice(nestedIndex + 1)
]
},
...list.slice(index + 1) // get items after the userID
]
}
Donc, vous voulez supprimer une Timerecord spécifique d'un autre utilisateur spécifique? Vous pouvez mapper les utilisateurs, si ID n'est pas une correspondance, vous pouvez activer cet utilisateur immédiatement, si elles correspondent, vous pouvez filtrer Timerecords et mettre à jour l'utilisateur avec ceci.
deleteRecord = (recordID, userID) => {
return employeesList.map(employee => {
if (employee.id !== userID) return employee;
const timeRecords = employee.timeRecords.filter(
timeRecord => timeRecord.id !== recordID
);
return { ...employee, timeRecords };
});
};
Pourriez-vous ajouter le tableau d'entrée et quel objet doit être supprimé?
J'ai 2 entrées: heure de saisie et numéro. La valeur des entrées est connectée à l'état, lorsque vous cliquez sur le bouton "Ajouter", puis créez un objet {id: 0, jour: '2019-01-01' Heures: 8 '} Suivant est par exemple: {id: 1, etc.}. Quel objet doit être supprimé dépend de ce que vous avez cliqué. Objet principal "employé" est le même mais avec des données différentes