reactjs console.log repond avec une étape en retard

Version imprimable

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:

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>
          </>
        }
      />

20/12/2021, 11h27
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

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:

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
  }

24/12/2021, 15h01
saninx

:(:(:(:( help !!
24/12/2021, 17h00
-Nikopol-
essaye de mettre ton traitement pour setItem dans un useeffect avec listId comme dépendance
Code:

1 2 3 4 useEffect(()=>{ //todo },[listId]);
27/12/2021, 10h43
saninx

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