Discussion :

[saninx]

j'ai une fonction qui m'aide à remplir un tableau et à comparer les éléments. cependant, lorsque je fais un console.log sur le tableau rempli il me montre le résultat avec une étape en retard. comment puis je résoudre ce problème ? merci de m'aider.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  const handleIdem = (table, element) => {
    setListId(element)
 
    setIdem(false)
    let dataT = []
 
    table.map((item) => {
      listId.includes(item.id) && dataT.push(item.MONTANT_PAIEMENT)
    })
    // Vérifier si tous les éléments du tableau sont identiques
    if (dataT.every((val, i, arr) => val === arr[0]) == true) {
      setIdem(true)
    }
    console.log(dataT)
    return idem
  }
 
<Formik
                noValidate
                initialValues={{
                  debut: initial.debut,
                  fin: initial.fin,
                }}
                validationSchema={schema}
                onSubmit={(values, onSubmitProps) => {
                  MettreAJourTableau(values)
                }}>
                {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                }) => (
                  <div style={{ textAlign: 'right' }}>
                    <Form>
                      <Controls.TextInput
                        margin='normal'
                        id='debut'
                        type='date'
                        helperText={errors.debut}
                        error={errors.debut && true}
                        size='small'
                        name='debut'
                      />
                      <Controls.TextInput
                        margin='normal'
                        id='fin'
                        type='date'
                        helperText={errors.fin}
                        error={errors.fin && true}
                        name='fin'
                        style={{ marginLeft: '5px' }}
                      />
                      <FormControlLabel
                        control={
                          <GreenCheckbox
                            checked={checkedG}
                            onChange={handleCheck}
                            name='retire'
                          />
                        }
                        label='Retirés'
                        style={{ marginLeft: '2px', paddingTop: '10px' }}
                      />
                      <Buttons
                        style={{ marginTop: '16px' }}
                        variant='contained'
                        color='default'
                        size='large'
                        className={classes.button}
                        startIcon={<SearchIcon fontSize='large' />}></Buttons>
                    </Form>
                  </div>
                )}
              </Formik>
            </div>
          </>
        }
      />

[Doksuri]

je pense que c'est pas un probleme "react" mais un probleme JS (general)
le console.log va se faire "quand il a le temps" pour ne pas plomber les perfs des scripts de la page. il se peu qu'il n'arrive pas au moment escompte (ce n'est pas fiable a 100%)
de plus, quand tu logs des variables, celles-ci sont interpretees au moment du log (et donc peuvent avoir ete mises a jour entre temps)

la seule parade que j'ai trouve a ce probleme (les rares fois ou ca m'arrive) est de faire un JSON.stringify(data) dans une variable temporaire dediee, et de console.log la version strignify de la data

[saninx]

dans mon cas, le state n'est effectivement pas mis à jour. le setlistId se met à jour au moment de l'action mais le setIdem avec une étape de retard.

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
  const handleIdem = (table, element) => {
    setListId(element)
 
    let dataT = []
 
    table.map((item) => {
      listId.includes(item.id) && dataT.push(item.MONTANT_PAIEMENT)
    })
    // Vérifier si tous les éléments du tableau sont identiques
    if (dataT.every((val, i, arr) => val === arr[0]) == true) {
      setIdem(true)
    } else {
      setIdem(false)
    }
    return idem
  }

[saninx]

help !!

[-Nikopol-]

essaye de mettre ton traitement pour setItem dans un useeffect avec listId comme dépendance

Code :

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

1
2
3
4
 
useEffect(()=>{
    //todo
},[listId]);

[saninx]

Merci infiniment, c'était la solution à mon problème. tout fonctionne correctement.