Translation of Preserving and Resetting State #518
Conversation
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
tdd
added
Pending Review
There was a problem hiding this comment.
Salut @linsolas !
Avant toute chose, merci pour tout ce boulot ! C'est super cool de nous filer un coup de main.
Écoute c'est top comme toujours (j'ai gelé une revue où je dois faire 3 retouches par phrase, c'est un souci, j'attends les suggestions du contrib).
Bon tu as mis "rendu" / "faire le rendu" au lieu d'un "afficher" qui aurait suffi et allégé le texte, je sais pas pkoi, j'ai ajusté. Et tu n'arrivais pas à te décider pour "sur la position" / "à la position" (correct) / "dans la position" 😂, j'ai ajusté aussi.
J'ai reviewé jusqu'aux Défis, pour rester sous les ≈50 comments histoire que GitHub laisse passer. Je te fais la revue des Défis plus tard dans la journée.
Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)
Tout est fait sous forme de Suggestions GitHub, il te suffit à chaque suggestion que tu approuves de
cliquer le bouton d'ajout au lot de modifs à committer (pas de commit direct !), et sur la fin de créer le commit groupé. (ce mode de regroupement en un seul commit est à favoriser absolument, mais tu devras aller dans l'onglet Files changed pour y accéder, il n'est pas utilisable dans l’onglet Conversation)
Si certaines appellent discussion, n'hésite pas, tu réponds, on en parle, on avance ensemble 🤝
Quand tout sera bouclé côté code, je ferai une repasse visuelle finale en local avant de fusionner. J'y recalerai si besoin les usual suspects : espaces insécables avant les ponctuations doubles, et apostrophes françaises.
Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans main !
|
|
||
| Resetting state with a key is particularly useful when dealing with forms. | ||
| Réinitialiser un état avec une clé est particulièrement utile quand on manipule des formulaires. |
There was a problem hiding this comment.
| Réinitialiser un état avec une clé est particulièrement utile quand on manipule des formulaires. | |
| Réinitialiser un état avec une clé s'avère particulièrement utile quand on manipule des formulaires. |
| @@ -1132,17 +1131,17 @@ textarea { | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree. | |||
| Essayez de saisir quelque chose dans le champ, puis appuyez sur « Alice » ou « Bob » pour choisir un destinataire différent. Vous noterez que le champ de saisie est conservé parce que le `<Chat>` est rendu à la même position dans l'arbre. | |||
There was a problem hiding this comment.
| Essayez de saisir quelque chose dans le champ, puis appuyez sur « Alice » ou « Bob » pour choisir un destinataire différent. Vous noterez que le champ de saisie est conservé parce que le `<Chat>` est rendu à la même position dans l'arbre. | |
| Essayez de saisir quelque chose dans le champ, puis appuyez sur « Alice » ou « Bob » pour choisir un destinataire différent. Vous noterez que le champ de saisie est conservé parce que le `<Chat>` est affiché à la même position dans l'arbre. |
| - You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes. | ||
| - You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution. | ||
| - You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too. | ||
| - Vous pouvez afficher _tous_ les chats plutôt que le seul chat actif, mais en masquant les autres avec du CSS. Les chats ne seraient pas supprimés de l'arbre, de sorte que leur état local serait préservé. Cette solution fonctionne très bien pour des UI simples. Cependant, ça peut devenir très lent si les arbres cachés sont grands et contiennent de nombreux nœuds DOM. |
There was a problem hiding this comment.
On a pris soin de traduire par "discussion" dans toute la doc, et là tu me laisses des chatons ?
| - State is not kept in JSX tags. It's associated with the tree position in which you put that JSX. | ||
| - You can force a subtree to reset its state by giving it a different key. | ||
| - Don't nest component definitions, or you'll reset state by accident. | ||
| - React conserve l'état tant que le même composant est rendu à la même position. |
There was a problem hiding this comment.
| - React conserve l'état tant que le même composant est rendu à la même position. | |
| - React conserve l'état tant que le même composant est affiché à la même position. |
| - Don't nest component definitions, or you'll reset state by accident. | ||
| - React conserve l'état tant que le même composant est rendu à la même position. | ||
| - L'état n'est pas conservé dans les balises JSX. Il est associé à la position dans l'arbre où vous placez ce JSX. | ||
| - Vous pouvez forcer un sous-arbre à réinitialiser son état en donnant une clé différente. |
There was a problem hiding this comment.
| - Vous pouvez forcer un sous-arbre à réinitialiser son état en donnant une clé différente. | |
| - Vous pouvez forcer un sous-arbre à réinitialiser son état en lui donnant une clé différente. |
There was a problem hiding this comment.
Salut @linsolas !
Avant toute chose, merci pour tout ce boulot ! C'est super cool de nous filer un coup de main.
Écoute c'est top comme toujours (j'ai gelé une revue où je dois faire 3 retouches par phrase, c'est un souci, j'attends les suggestions du contrib).
Bon tu as mis "rendu" / "faire le rendu" au lieu d'un "afficher" qui aurait suffi et allégé le texte, je sais pas pkoi, j'ai ajusté. Et tu n'arrivais pas à te décider pour "sur la position" / "à la position" (correct) / "dans la position" 😂, j'ai ajusté aussi.
J'ai reviewé jusqu'aux Défis, pour rester sous les ≈50 comments histoire que GitHub laisse passer. Je te fais la revue des Défis plus tard dans la journée.
Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)
Tout est fait sous forme de Suggestions GitHub, il te suffit à chaque suggestion que tu approuves de
cliquer le bouton d'ajout au lot de modifs à committer (pas de commit direct !), et sur la fin de créer le commit groupé. (ce mode de regroupement en un seul commit est à favoriser absolument, mais tu devras aller dans l'onglet Files changed pour y accéder, il n'est pas utilisable dans l’onglet Conversation)
Si certaines appellent discussion, n'hésite pas, tu réponds, on en parle, on avance ensemble 🤝
Quand tout sera bouclé côté code, je ferai une repasse visuelle finale en local avant de fusionner. J'y recalerai si besoin les usual suspects : espaces insécables avant les ponctuations doubles, et apostrophes françaises.
Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans main !
|
|
||
| </Recap> | ||
|
|
||
|
|
||
|
|
||
| <Challenges> | ||
|
|
||
| #### Fix disappearing input text {/*fix-disappearing-input-text*/} | ||
| #### Corriger une saisie qui disparait {/*fix-disappearing-input-text*/} |
There was a problem hiding this comment.
| #### Corriger une saisie qui disparait {/*fix-disappearing-input-text*/} | |
| #### Corriger une saisie qui disparaît {/*fix-disappearing-input-text*/} |
|
|
||
| This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text. | ||
| Cet exemple montre un message quand vous appuyez sur le bouton. Cependant, appuyer sur ce bouton vide aussi le champ de saisie. Pourquoi ça arrive ? Corrigez ça pour que le champ de saisie ne se vide pas quand on appuie sur le bouton. |
There was a problem hiding this comment.
| Cet exemple montre un message quand vous appuyez sur le bouton. Cependant, appuyer sur ce bouton vide aussi le champ de saisie. Pourquoi ça arrive ? Corrigez ça pour que le champ de saisie ne se vide pas quand on appuie sur le bouton. | |
| Cet exemple affiche un message quand vous appuyez sur le bouton. Cependant, appuyer sur ce bouton vide aussi le champ de saisie par accident. Pourquoi ? Corrigez ça pour que le champ de saisie ne se vide pas quand on appuie sur le bouton. |
| @@ -1315,9 +1314,9 @@ textarea { display: block; margin: 10px 0; } | |||
|
|
|||
| <Solution> | |||
|
|
|||
| The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes. | |||
| Le problème est lié au fait que le `Form` est rendu à des positions différentes. Dans la branche du `if`, c'est le second enfant du `<div>`, mais c'est le premier enfant dans la branche `else`. De fait, le type du composant sur chaque position change. Dans un cas, la première position reçoit un `p` puis un `Form`, alors que le second cas, elle reçoit un `Form` puis un `bouton`. React réinitialise l'état à chaque fois que le type du composant change. | |||
There was a problem hiding this comment.
| Le problème est lié au fait que le `Form` est rendu à des positions différentes. Dans la branche du `if`, c'est le second enfant du `<div>`, mais c'est le premier enfant dans la branche `else`. De fait, le type du composant sur chaque position change. Dans un cas, la première position reçoit un `p` puis un `Form`, alors que le second cas, elle reçoit un `Form` puis un `bouton`. React réinitialise l'état à chaque fois que le type du composant change. | |
| Le problème vient de ce que le `Form` est affiché à des positions différentes. Dans la branche du `if`, c'est le second enfant du `<div>`, mais c'est le premier enfant dans la branche `else`. Du coup, le type du composant à chaque position change. Dans un cas, la première position reçoit un `p` puis un `Form`, alors que dans l'autre cas, elle reçoit un `Form` puis un `button`. React réinitialise l'état à chaque fois que le type du composant change. |
|
|
||
| The easiest solution is to unify the branches so that `Form` always renders in the same position: | ||
| La solution la plus simple est de réunir les branches de façon à ce que `Form` soit toujours rendu à la même position : |
There was a problem hiding this comment.
| La solution la plus simple est de réunir les branches de façon à ce que `Form` soit toujours rendu à la même position : | |
| La solution la plus simple consiste à réunir les branches de façon à ce que `Form` soit toujours affiché à la même position : |
| @@ -1411,19 +1410,19 @@ textarea { display: block; margin: 10px 0; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`. | |||
| De cette façon, `Form` est toujours le second enfant, il conserve donc sa position et garde son état. Cette approche est moins intuitive et introduit un risque si quelqu'un vient à supprimer ce `null`. | |||
There was a problem hiding this comment.
| De cette façon, `Form` est toujours le second enfant, il conserve donc sa position et garde son état. Cette approche est moins intuitive et introduit un risque si quelqu'un vient à supprimer ce `null`. | |
| De cette façon, `Form` est toujours le second enfant, il conserve donc sa position et garde son état. Cette approche est toutefois moins intuitive et introduit le risque que quelqu'un vienne supprimer ce `null`. |
| @@ -2032,7 +2031,7 @@ export default function ContactList() { | |||
| setReverse(e.target.checked) | |||
| }} | |||
| />{' '} | |||
| Show in reverse order | |||
| Afficher dans l'ordre inverse | |||
There was a problem hiding this comment.
| Afficher dans l'ordre inverse | |
| Afficher dans l’ordre inverse |
| @@ -2096,16 +2095,16 @@ button { | |||
|
|
|||
| <Solution> | |||
|
|
|||
| The problem is that this example was using index as a `key`: | |||
| Le problème de cet exemple c'est qu'il utilisait l'index en tant que `key` : | |||
There was a problem hiding this comment.
| Le problème de cet exemple c'est qu'il utilisait l'index en tant que `key` : | |
| Le problème de cet exemple, c'est qu'il utilisait l'index en tant que `key` : |
| @@ -2131,7 +2130,7 @@ export default function ContactList() { | |||
| setReverse(e.target.checked) | |||
| }} | |||
| />{' '} | |||
| Show in reverse order | |||
| Afficher dans l'ordre inverse | |||
There was a problem hiding this comment.
| Afficher dans l'ordre inverse | |
| Afficher dans l’ordre inverse |
| @@ -2066,7 +2065,7 @@ export default function Contact({ contact }) { | |||
| <button onClick={() => { | |||
| setExpanded(!expanded); | |||
| }}> | |||
| {expanded ? 'Hide' : 'Show'} email | |||
| {expanded ? 'Cacher' : 'Afficher'} l'e-mail | |||
There was a problem hiding this comment.
| {expanded ? 'Cacher' : 'Afficher'} l'e-mail | |
| {expanded ? 'Cacher' : 'Afficher'} l’e-mail |
| @@ -2165,7 +2164,7 @@ export default function Contact({ contact }) { | |||
| <button onClick={() => { | |||
| setExpanded(!expanded); | |||
| }}> | |||
| {expanded ? 'Hide' : 'Show'} email | |||
| {expanded ? 'Cacher' : 'Afficher'} l'e-mail | |||
There was a problem hiding this comment.
| {expanded ? 'Cacher' : 'Afficher'} l'e-mail | |
| {expanded ? 'Cacher' : 'Afficher'} l’e-mail |
tdd
added
Reviewed
and removed
Reviewing
|
Hello @tdd, Merci encore pour ta relecture.
Oui clairement ! Il me semblait avoir enlevé les "dans la position", mais je n'arrivais pas à choisir entre le "à" ou "sur", les deux marchaient bien en général 😉 Autrement, j'ai fait une repasse dessus pour corriger la ponctuation dans les légendes des diagrammes, et j'ai tué les châtons 😢 |
Co-authored-by: Christophe Porteneuve <[email protected]>
tdd
force-pushed
the
preserving-and-resetting-state
branch
from
c80afd2
to
b0c3279
Compare
No description provided.