Discussion :

[Jinouga]

Après 2 jours de luttes acharnées, j'ai décidé de poster ici

Mon souci est le suivant :

Dans le cadre d'un projet, je souhaite générer un nombre de champs de saisie égal à la taille d'un tableau. Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function App() {
  const [UseState, setUseState] = useState("");
  const array = [0, 1, 2];
 
  const HandleAdding = (e) => {
    e.preventDefault;
    const returnJson = { UseState };
    //rest of the code
  };
 
  return (
    <div>
      {array.map(() => (
        <form onSubmit={HandleAdding}>
          <input value={UseState} onChange={(e) => setUseState(e.target.value)} />
        </form>
      ))}
    </div>
  );
}

On peut déjà connaître le problème, lors de l'insertion d'une valeur sur un champ, cette même valeur sera insérée sur tous les autres champs qui partagent le même UseState comme valeur.
Voici un CodeSandBox pour concrétiser davantage mon soucis:

https://codesandbox.io/s/adoring-rgb...le=/src/App.js

J'ai essayé beaucoup de choses pour résoudre mon problème comme ceci:

https://codesandbox.io/s/blissful-ra...le=/src/App.js (J'essaye d'adapter le code pour résoudre mon soucis).

Je ne mets rien de plus pour éviter que le sujet ne devienne trop long. Alors, auriez-vous une solution pour résoudre le problème ? Pour ma part je suis à court d'idées, et encore débutant sur React. Merci d'avance! ^^

[gwyohm]

Salut,

Je suis pas sur à 100% d'avoir compris ce que tu essayais de faire, mais je pense que la clé pour aller où tu veux, c'est de découper en plusieurs composants.
Quoi qu'il en soit, tu pars en boucle infinie parce que quand ton composant se dessine, il fait appel à une fonction qui change son state, ce qui re-déclenche un render

Si je comprends bien tu veux afficher n fois un groupe de champs.
Pour l'instant, ce n est la taille d'un tableau.
À mon avis, tu devrais commencer par découper en au moins 2 composants. 1 qui se charge d'afficher n fois l'autre qui affiche les champs.

Un exemple simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
function Item(props) {
  const item = typeof props.value === 'object' ? props.value : {};
  return (
   <tr>
    <td>{props.index}</td>
    <td><input type="text" value={item.name || ''} onChange={e => props.onChange({...props.value, name: e.target.value })}/></td>
    <td><input type="text" value={item.min || ''} onChange={e => props.onChange({...props.value, min: e.target.value })}/></td>
    <td><input type="text" value={item.max || ''} onChange={e => props.onChange({...props.value, max: e.target.value })}/></td>
    <td><input type="text" value={item.weight || ''} onChange={e => props.onChange({...props.value, weight: e.target.value })}/></td>
   </tr>
  )
}
 
export default function App() {
  const [data, setData] = useState([0, 1, 2]);
 
  function setDataAtIndex(index, value) {    
    setData([...data.slice(0, index), value, ...data.slice(index + 1, data.length)]);
  }
  return (
    <div>
    <table>
    { data.map((item, index) => (
      <Item index={index} value={item} onChange={e => setDataAtIndex(index, e)}/>
    ))}
    </table>
<pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

[Jinouga]

Yoo!

Merci beaucoup pour ta réponse, je vais essayer d'implémenter ce que tu m'as dis, pour l'instant j'suis pas sûr si ça répond bien à ma problématique.
J'ai simplifié mon sujet afin que ça soit plus court à lire et plus facile à comprendre! ^^