Je veux basculer une propriété d'un objet dans un tableau. Le tableau ressemble comme suit. Ceci est utilisé dans un composant réacteur et lorsqu'un utilisateur clique sur un bouton, je souhaite basculer le gagnant.
function Parent = () => {
const [fixtures, setUpdateFixtures] = useState(initialFixtures)
const toggleWinner = (index) => {
const updatedFixtures = fixtures.map((fixture, i) => {
if (i === index) {
return {
...fixture,
winner: fixture.winner === home ? away : home,
};
} else {
return fixture;
}
})
setUpdateFixtures(updatedFixtures);
}
return <Fixtures fixtures={fixtures} toggleWinner={toggleWinner} />;
}
function Fixtures = ({ fixtures, toggleWinner }) => {
fixtures.map((fixture, index) => (
<div>
<p>{fixture.winner} </p>
<button onClick = {() => toggleWinner(index)}> Change Winner</button>
</div>
))
}
6 Réponses :
const toggleWinner = (index) => {
let updatedFixtures = [...fixtures].splice(index, 1, {...fixtures[index],
winner: fixtures[index].winner === fixtures[index].teams.home
? fixtures[index].teams.away : fixtures[index].teams.home})
setUpdateFixtures(updatedFixtures);
}
Vous pouvez utiliser des bibliothèques telles que Immer pour mettre à jour les états imbriqués facilement facilement.
p>
<script src="https://cdn.jsdelivr.net/npm/immer@1.0.1/dist/immer.umd.js"></script>
const updatedFixtures = [...fixtures];
const fixture = updatedFixtures[i];
updatedFixtures[i] = {
...fixture,
winner: fixture.winner === fixture.teams.home ? fixture.teams.away : fixture.teams.home,
};
Cela va muté le tableau, non?
Il ne mutera que la matrice UpdatedFixTures. Comme celui-ci ne fait pas partie de l'état (encore), vous pouvez la muter comme vous le souhaitez.
Si votre préoccupation concernait la déclaration de const, MDN déclare que la déclaration de const crée une référence en lecture seule à une valeur. Cela ne signifie pas que la valeur qu'il contient est immuable, mais que l'identifiant variable ne peut pas être réaffecté.
vous pouvez SLICE Les fixtures Array en trois parties:
de 0 à L'élément unique à Le reste de la matrice: Ensuite, mettez-les dans un nouveau tableau: pour construire le nouvel élément: index : fixtures.slice (0, index) . Cette partie est déplacée vers la nouvelle matrice intacte.
index . Cette partie / élément est éloignée en raison d'être modifiée et un nouvel élément est substitué.
fixtures.slice (index + 1) .
Si vous écrivez votre code de telle manière - cela fera le travail.
const toggleWinner = index => {
const { winner, teams: { home, away } } = fixtures[index];
fixtures[index].winner = winner === home ? away : home;
setUpdateFixtures([...fixtures]);
};
Si vous êtes à l'aise d'utiliser une approche de classe, vous pouvez essayer quelque chose comme ceci:
ishomewinner code>. Cette propriété décidera du gagnant. LI>
- Créez ensuite une propriété getter
gagnant code> qui va chercher ceci.Sishomewinner code> et donnera la valeur nécessaire. LI>
- Cela vous permettra d'avoir une fonction propre
bascule code> fonction: this.ishomewinner =! Ceci.Sishomewinner code>. Li>.
ul> Vous pouvez également écrire votre togglewinner code> comme: p> xxx pré> Ceci semble propre et déclaratif. Remarque, si une immuabilité est nécessaire, alors seulement cela est requis. Si vous êtes à l'aise avec des valeurs de mutation, passez simplement fixture.toggle code> à votre composant de réact. Vous devrez peut-être bien lier le contexte, mais cela devrait fonctionner aussi bien. P> Donc, il ressemblerait à quelque chose comme: p> xxx pré>
suivi est un échantillon de classe et son utilisation: p>
p>
class Fixtures {
constructor(home, away, isHomeWinner) {
this.team = {
home,
away
};
this.isHomeWinner = isHomeWinner === undefined ? true : isHomeWinner;
}
get winner() {
return this.isHomeWinner ? this.team.home : this.team.away;
}
toggle() {
this.isHomeWinner = !this.isHomeWinner
}
}
let initialFixtures = [
new Fixtures('Liverpool', 'Manchester Utd'),
new Fixtures('Chelsea', 'Fulham', false),
new Fixtures('Arsenal', 'Tottenham'),
];
const toggleWinner = (index) => {
const newArr = initialFixtures.slice();
newArr[index].toggle();
return newArr;
};
initialFixtures.forEach((fixture) => console.log(fixture.winner))
console.log('----------------')
initialFixtures = toggleWinner(1);
initialFixtures.forEach((fixture) => console.log(fixture.winner))
initialFixtures = toggleWinner(2);
console.log('----------------')
initialFixtures.forEach((fixture) => console.log(fixture.winner))
Merci d'avoir pris le temps de répondre, mais cela ne convient pas vraiment à ce que je veux faire.
Où est
Changewinner fonction?Où et le
home etAway variables déclarées?Le code fonctionne, mais on a l'impression que c'est un peu trop. Les demandes de révision du code sont hors tension ici. Regardez cr
Question rapide. Comment est-ce:
fonction fonction = () => { fonctionne ??C'est un composant fonctionnel étant rendu dans l'application. Il utilise des crochets si c'est ce que vous demandez?