Hook useEffect dépendance crée une boucle infini
Bonjour,
Je suis nouveau en JS particulièrement avec React, je me suis lancé à comprendre l'utilisation des hooks et particulièrement "useEffect".
Mais j'ai un petit soucis, voici la situation, j'ai un useState qui représente une liste d'objet. Ces objet ont deux string, l'un contient un charactère/une lettre, l'autre contient une couleur (qui est le nom d'une classe CSS que je défini à l'intérieur de mon composant avec className={}). Et j'ai un input où les données écritent sont lu par un autre useState.
Bon ma problématique est la suivante, j'ai donc une liste/suite de charactères(ex "ABCDEF"), où ces lettres ont une couleur initiale(ex noir), lorsque j'écris dans mon input je veux, si la lettre de mon input est identique à la lettre de ma liste, sa couleur passe en vert, si elle est fausse en rouge, et les suivantes ect...
Sauf que j'ai compris qu'avec react quand on change une valeur d'un useState, il y avait un décalage de 1, exemple quand j'écris dans mon input ex:"A" la valeur de mon input est égale à rien, quand j'écris la lettre suvante ex:"AB" la valeur de mon input deviens "A", "ABC" égale "AB" ect...
Pour contourner ce principe j'ai trouvé le hook "useState" qui lui renvoi la valeur "en direct" de mon useState. Voici mon code:
Code:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
|
const [inputValue, setInputValue] = useState('');
const [words, setWords] = useState([{str: 'A', color: 'color-one'}, {str: "B", color:"color-one"}, {str: "C", color: "color-one"}]);
const inputHandler =(event) =>{
const string = event.target.value;
setInputValue(string);
}
useEffect(()=>{
const charWords = words.map(word => word.str);
const charInput = inputValue.charAt(inputValue.length-1);
if(charInput === charWords[inputValue.length-1]){
const goodAnswer = words.map((elem,i)=>{
if(i === inputValue.length-1){
return {...elem, color: "color-two",}
}else{
return elem;
}
})
setWords(goodAnswer);
}else{
if(charInput ===""){
}else{
const wrongAnswer = words.map((elem,i)=>{
if(i === inputValue.length-1){
return {...elem, color: "wrong-answer",}
}else{
return elem;
}
})
setWords(wrongAnswer);
}
}
}, [inputValue]);
return(
<div>
{words.map((elem)=>(
<label className={elem.color}>{elem.str}</label>
))}
<input value={inputValue} onChange={inputHandler}/>
</div>
) |
Alors la bonne nouvelle c'est que tout fonctionne quand j'écris dans mon input ca compare par rapport à la liste de lettre et ca change la couleur en fonction. Bon alors où est le probléme si tout fonctionne me diriez vous? Et bien ca se passe dans la console(non celle du navigateur mais celle de nodejs quand je fais "npm start"). J'ai une erreur (ou plutot un "avertissement") me disant ceci:
Citation:
"Line 39:8: React Hook useEffect has a missing dependency: 'words'. Either include it or remove the dependency array react-hooks/exhaustive-deps"
Alors si j'ai bien compris il me demande soit d'ajouter la variable manquante (ici "words") dans le tableau de dépendance, soit de supprimer le tableau. Si je supprime le tableau rien ne fonctionne, et si j'ajoute "words" au tableau je n'ai plus d'erreur dans la console en revanche sur mon navigateur ca crée une boucle infini et il n'est pas content du tout.
Donc ma question est, comment résoudre ce problème ? Ou bien est-ce vraiment un problème, vu que le code fonctionne, du coup est-ce si grave de laisser mon code ainsi ?
Ou alors je m'y prend vraiment comme un manche et qu'il faudrait que j'utilise une méthode complétement différente et plus sure, que mon petit cerveau n'a pas su trouver.
Merci de vos futurs réponses.
