Je supprime un identifiant unique dans un tableau, comment puis-je installer après filtrant ici?
https://codesandbox.io/s/react-example-1m2qn P>
const Debtors = () => {
const debtors = [
{
id: 1,
name: "John",
relation: "friend",
statement: [
{ id: 1, date: 2010, amount: "1000", purpose: "John" },
{ id: 2, date: 2014, amount: "2000", purpose: "john" }
]
},
,
{
id: 2,
name: "Jack",
relation: "Friend",
statement: [
{ id: 1, date: 2010, amount: "1000", purpose: "jack" },
{ id: 2, date: 2014, amount: "2000", purpose: "jack" }
]
}
];
const [newDebtors, setdebtors] = React.useState(debtors);
const handleDelete = (stat, i) => {
const newList = newDebtors[0].statement.filter(x => x.id !== stat.id);
// How to set debtors here ?
// setdebtors({ ...newDebtors, statement[0]: newList });
console.log(newList)
4 Réponses :
Vous devriez le faire comme ça:
setdebtors((prevState) => {
let newArray = Array.from(prevState); // Copy the array
// Manipulate the array as you wish
return newArray; // return it
});
Il y a deux problèmes:
1) Vous êtes itération de l'objet de débiteurs d'origine dans votre rendu, au lieu de l'état vous avez besoin: 2) Vous devez Passez l'index de l'élément dans votre HandleDelete () de sorte qu'il sait de l'objet dans la matrice à mettre à jour. Vous pouvez avoir la fonction faire quelque chose comme ceci: dans l'Onclick: dans la poignée (): Voir Sandbox pour une solution complète: https://codesandbox.io/s / réact-exemple-x7uoh NewDebTors que vous avez créé via USESTE () , c'est pourquoi il ne semble pas y avoir de changement d'interface utilisateur. NewDebTors [0] .statement.map
@Loscause de votre choix. J'ai également ajouté un autre composant dans une complexolution, que je pense, c'est ce que vous recherchez finalement plus tard.
Le problème est que vous manchonnez la matrice de "débiteurs" que vous devez planer via le tableau des débiteurs et modifier toutes les propriétés de l'objet. Une approche encore meilleure est d'utiliser "UserEducer" qui est utilisé pour muter des pièces d'état plus complexes, comme vous l'avez ici. Les docs sont très utiles userEducer
hmm je ne sais pas ce que vous essayez exactement de faire, Est-ce ce que vous recherchez?
const handleDelete = (stat, i) => {
const newList = newDebtors[0].statement.filter(x => x.id !== stat.id);
const newFirstItem = {...newDebtors[0],statement: newList}
const newDebtorList = newDebtors.filter(x => x.id !== newFirstItem.id);
newDebtorList.unshift(newFirstItem);
setdebtors(newDebtorList);
}
Vous changez toujours une déclaration d'indice Zeroth? Est-ce que tu veux?
J'ai défini dynamiquement l'index dans mon code complet, après avoir sélectionné l'identifiant, je ne sais tout simplement pas comment définir une matrimonie, pouvez-vous donner un exemple de toute déclaration d'index
Pouvez-vous simplement me dire le format du nouvel état que vous devez le définir comme ... Je veux dire un exemple de la sortie que vous attendez