useEffect update the state but the not the const related to the state
Question
Hi I've got a problem that I don't understrand : when I look the web tools I can see that my state is update with the useEffect and some of the const related to that state are update but not all of them.
This my code
import React, {useEffect} from 'react';
import {useLocation} from 'react-router-dom'
import Entete from './MEP/entete'
import OADMenu from './MEP/oadMenu'
import GraphMarges from './Graphiques/marges'
function RisquesPrix() {
const { state } = useLocation()
const { city } = state
const [PBTot, setPBTot]= React.useState(0);
useEffect ( () => {
fetch('http://localhost:3000//api/1.0/page/exploitation/1789')
.then( (response) => {
return response.json()
})
.then(response =>{
setPBTot(response.PBTotal)
})
}, [])
const ChargesTot = PBTot*0.85
const ventes2Moins = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*0.98},{x:6,y:PBTot*0.96},{x:9,y:PBTot*0.94},{x:12,y:PBTot*0.91},{x:18,y:PBTot*0.89}]
const ventesMoins = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*0.99},{x:6,y:PBTot*0.985},{x:9,y:PBTot*0.975},{x:12,y:PBTot*0.97},{x:18,y:PBTot*0.955}]
const ventesMoy = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.01},{x:6,y:PBTot*1.02},{x:9,y:PBTot*1.04},{x:12,y:PBTot*1.05},{x:18,y:PBTot*1.07}]
const ventesPlus = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.02},{x:6,y:PBTot*1.05},{x:9,y:PBTot*1.07},{x:12,y:PBTot*1.08},{x:18,y:PBTot*1.12}]
const ventes2Plus = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.04},{x:6,y:PBTot*1.09},{x:9,y:PBTot*1.10},{x:12,y:PBTot*1.13},{x:18,y:PBTot*1.17}]
const charges2Moins = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*0.96},{x:6,y:ChargesTot*0.94},{x:9,y:ChargesTot*0.92},{x:12,y:ChargesTot*0.89},{x:18,y:ChargesTot*0.87}]
const chargesMoins = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*0.99},{x:6,y:ChargesTot*0.985},{x:9,y:ChargesTot*0.97},{x:12,y:ChargesTot*0.965},{x:18,y:ChargesTot*0.95}]
const chargesMoy = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.01},{x:6,y:ChargesTot*1.02},{x:9,y:ChargesTot*1.04},{x:12,y:ChargesTot*1.05},{x:18,y:ChargesTot*1.07}]
const chargesPlus = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.05},{x:6,y:ChargesTot*1.08},{x:9,y:ChargesTot*1.10},{x:12,y:ChargesTot*1.11},{x:18,y:ChargesTot*1.15}]
const charges2Plus = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.08},{x:6,y:ChargesTot*1.13},{x:9,y:ChargesTot*1.15},{x:12,y:ChargesTot*1.17},{x:18,y:ChargesTot*1.19}]
const [Pvente, setPV]= React.useState(ventesMoy)
const [ChargesF, setC]= React.useState(chargesMoy)
const [BV2M, setBV2M]= React.useState('UnChecked')
const [BVM, setBVM]= React.useState('UnChecked')
const [BVMoy, setBVMoy]= React.useState('Checked')
const [BVP, setBVP]= React.useState('UnChecked')
const [BV2P, setBV2P]= React.useState('UnChecked')
const [BC2M, setBC2M]= React.useState('UnChecked')
const [BCM, setBCM]= React.useState('UnChecked')
const [BCMoy, setBCMoy]= React.useState('Checked')
const [BCP, setBCP]= React.useState('UnChecked')
const [BC2P, setBC2P]= React.useState('UnChecked')
const maximum= ventes2Plus[7].y
const minimum= charges2Moins[7].y
function handlePressV2M() {
setPV(ventes2Moins)
setBV2M('Checked')
setBVM('UnChecked')
setBVMoy('UnChecked')
setBVP('UnChecked')
setBV2P('UnChecked')
}
function handlePressVM() {
setPV(ventesMoins)
setBVM('Checked')
setBV2M('UnChecked')
setBVMoy('UnChecked')
setBVP('UnChecked')
setBV2P('UnChecked')
}
function handlePressVMoy() {
setPV(ventesMoy)
setBVMoy('Checked')
setBV2M('UnChecked')
setBVM('UnChecked')
setBVP('UnChecked')
setBV2P('UnChecked')
}
function handlePressVP() {
setPV(ventesPlus)
setBVP('Checked')
setBV2M('UnChecked')
setBVM('UnChecked')
setBVMoy('UnChecked')
setBV2P('UnChecked')
}
function handlePressV2P() {
setPV(ventes2Plus)
setBV2P('Checked')
setBV2M('UnChecked')
setBVM('UnChecked')
setBVMoy('UnChecked')
setBVP('UnChecked')
}
function handlePressC2M() {
setC(charges2Moins)
setBC2M('Checked')
setBCM('UnChecked')
setBCMoy('UnChecked')
setBCP('UnChecked')
setBC2P('UnChecked')
}
function handlePressCM() {
setC(chargesMoins)
setBCM('Checked')
setBC2M('UnChecked')
setBCMoy('UnChecked')
setBCP('UnChecked')
setBC2P('UnChecked')
}
function handlePressCMoy() {
setC(chargesMoy)
setBCMoy('Checked')
setBC2M('UnChecked')
setBCM('UnChecked')
setBCP('UnChecked')
setBC2P('UnChecked')
}
function handlePressCP() {
setC(chargesPlus)
setBCP('Checked')
setBC2M('UnChecked')
setBCM('UnChecked')
setBCMoy('UnChecked')
setBC2P('UnChecked')
}
function handlePressC2P() {
setC(charges2Plus)
setBC2P('Checked')
setBC2M('UnChecked')
setBCM('UnChecked')
setBCMoy('UnChecked')
setBCP('UnChecked')
}
return (
<div >
<Entete titre="Risques prix"/>
<div className='container'>
<div className='titre'>Quel est l’impact de l’évolution du prix sur ma marge ? {city} </div>
<div className='paragraphe'>Les prix de vente et les charges connaissent de fortes variations. Estimez l'impact sur votre marge. </div>
<div className='card cardPrix'>
<div className='titreCard'>Sélectionnez des variations de charges et de prix de vente </div>
<div className='flexLigne'>
<div style={{fontSize:25, textAlign:'right', width:'25%', }}>Prix de vente</div>
<button className={BV2M==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressV2M} >
<div className='active'>--</div>
</button>
<button className={BVM==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressVM} >
<div className='active'>-</div>
</button>
<button className={BVMoy==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressVMoy} >
<div className='active2'>Moy</div>
</button>
<button className={BVP==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressVP} >
<div className='active'>+</div>
</button>
<button className={BV2P==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressV2P} >
<div className='active'>++</div>
</button>
</div>
<div className='flexLigne'>
<div style={{fontSize:25, textAlign:'right', width:'25%',}}>Charges</div>
<button className={BC2M==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressC2M} >
<div className='active'>--</div>
</button>
<button className={BCM==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressCM} >
<div className='active'>-</div>
</button>
<button className={BCMoy==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressCMoy} >
<div className='active2'>Moy</div>
</button>
<button className={BCP==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressCP} >
<div className='active'>+</div>
</button>
<button className={BC2P==='UnChecked' ? 'buttonPrix buttonPrixDefault' : 'buttonPrix buttonPrixChecked'} onClick={handlePressC2P} >
<div className='active'>++</div>
</button>
</div>
</div>
<div className='titreMoins'>Résultats</div>
<div className='paragraphe'>Les résultats sont exprimés en milliers d'euros. "12" corresponds à une échéance dans 12 mois (dans 1 an) et "-3", celle d'il y a 3 mois. </div>
<GraphMarges dataPrix={Pvente} dataCharges={ChargesF} maximum={maximum} minimum={minimum}/>
<div className='legend'>
<div className='legendBloc'>
<div className='legendGraphiquePrix legendcharges'>|</div>
<div className='paragraphe'>Charges</div>
</div>
<div className='legendBloc'>
<div className='legendGraphiquePrix legendventes'>|</div>
<div className='paragraphe'>Prix de vente</div>
</div>
</div>
<div className='titreMoins'>Projections de la marge et son incertitude</div>
<div className='flexLignePrix'>
<div className='blocPrix'>
<div className='videBlocPrix videBloc3'>
<div className='pleinBlocPrix pleinBloc3'>
<div className='titreBloc'>3 mois</div>
</div>
<div style={{marginBottom:13}}>
<div className='paragrapheBlocPrix paragrapheBloc3'> {Math.round(Pvente[3].y-ChargesF[3].y).toLocaleString()}€ </div>
</div>
</div>
</div>
<div className='blocPrix'>
<div className='videBlocPrix videBloc6'>
<div className='pleinBlocPrix pleinBloc6'>
<div className='titreBloc'>6 mois</div>
</div>
<div style={{marginBottom:13}}>
<div className='paragrapheBlocPrix paragrapheBloc6'>{Math.round(Pvente[4].y-ChargesF[4].y).toLocaleString()}€</div>
</div>
</div>
</div>
<div className='blocPrix'>
<div className='videBlocPrix videBloc9'>
<div className='pleinBlocPrix pleinBloc9'>
<div className='titreBloc'>9 mois</div>
</div>
<div style={{marginBottom:13}}>
<div className='paragrapheBlocPrix paragrapheBloc9'>{Math.round(Pvente[5].y-ChargesF[5].y).toLocaleString()}€</div>
</div>
</div>
</div>
<div className='blocPrix'>
<div className='videBlocPrix videBloc12'>
<div className='pleinBlocPrix pleinBloc12'>
<div className='titreBloc'>12 mois</div>
</div>
<div style={{marginBottom:13}}>
<div className='paragrapheBlocPrix paragrapheBloc12'>{Math.round(Pvente[6].y-ChargesF[6].y).toLocaleString()}€</div>
</div>
</div>
</div>
<div className='blocPrix'>
<div className='videBlocPrix videBloc18'>
<div className='pleinBlocPrix pleinBloc18'>
<div className='titreBloc'>18 mois</div>
</div>
<div style={{marginBottom:13}}>
<div className='paragrapheBlocPrix paragrapheBloc18'>{Math.round(Pvente[7].y-ChargesF[7].y).toLocaleString()}€</div>
</div>
</div>
</div>
</div>
</div>
<OADMenu city={city}/>
</div>
);
}
export default RisquesPrix;
And this is my states an data when their are past to an other component :
{
"dataPrix": [
"{x: -6, y: 0}",
"{x: -3, y: 0}",
"{x: 0, y: 0}",
"{x: 3, y: 0}",
"{x: 6, y: 0}",
"{x: 9, y: 0}",
"{x: 12, y: 0}",
"{x: 18, y: 0}"
], //[{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.01},{x:6,y:PBTot*1.02},{x:9,y:PBTot*1.04},{x:12,y:PBTot*1.05},{x:18,y:PBTot*1.07}]
"dataCharges": [
"{x: -6, y: 0}",
"{x: -3, y: 0}",
"{x: 0,y: 0}",
"{x: 3, y: 0}",
"{x: 6, y: 0}",
"{x: 9, y: 0}",
"{x: 12, y: 0}",
"{x: 18, y: 0}"
], //[{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.01},{x:6,y:ChargesTot*1.02},{x:9,y:ChargesTot*1.04},{x:12,y:ChargesTot*1.05},{x:18,y:ChargesTot*1.07}]
"maximum": 190188.18, // const maximum= ventes2Plus[7].y
"minimum": 120208.68299999999 //const minimum= charges2Moins[7].y
}
So maximum is the right data but not the data that is suppose to be put in a chart. But when I click again on "Moy" the data appear.
Can someone help me understand ?
1 answers
solution1
0 2022-07-08 07:21:21
The problème was that the state PBTot is initialize on 0 so the const was calculate based on this 0. So at the begining all the ste was in 0 based but not the const that is instantly updting. I get arround of the problème by checking if it was the first the time the component mount:
- if it is the case, the data take the value of a const
- if it's not, the date take the state.
import React, {useEffect, useCallback} from 'react';
import {useLocation} from 'react-router-dom'
import Entete from './MEP/entete'
import OADMenu from './MEP/oadMenu'
import GraphMarges from './Graphiques/marges'
function RisquesPrix() {
const { state } = useLocation()
const { city } = state
const [PBTot, setPBTot]= React.useState();
const [Mount, setMount] = React.useState(true);
const [Mount2, setMount2] = React.useState(true);
useEffect ( () => {
fetch('http://localhost:3000/api/1.0/page/exploitation/1789')
.then( (response) => {
return response.json()
})
.then(response =>{
setPBTot(response.PBTotal)
setPBTot(prev => {
return prev;
})
})
}, [setPBTot])
const ChargesTot = PBTot*0.85
const ventes2Moins = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*0.98},{x:6,y:PBTot*0.96},{x:9,y:PBTot*0.94},{x:12,y:PBTot*0.91},{x:18,y:PBTot*0.89}]
const ventesMoins = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*0.99},{x:6,y:PBTot*0.985},{x:9,y:PBTot*0.975},{x:12,y:PBTot*0.97},{x:18,y:PBTot*0.955}]
const ventesMoy = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.01},{x:6,y:PBTot*1.02},{x:9,y:PBTot*1.04},{x:12,y:PBTot*1.05},{x:18,y:PBTot*1.07}]
const ventesPlus = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.02},{x:6,y:PBTot*1.05},{x:9,y:PBTot*1.07},{x:12,y:PBTot*1.08},{x:18,y:PBTot*1.12}]
const ventes2Plus = [{x:-6,y:PBTot*0.99},{x:-3,y:PBTot*0.995},{x:0,y:PBTot},{x:3,y:PBTot*1.04},{x:6,y:PBTot*1.09},{x:9,y:PBTot*1.10},{x:12,y:PBTot*1.13},{x:18,y:PBTot*1.17}]
const charges2Moins = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*0.96},{x:6,y:ChargesTot*0.94},{x:9,y:ChargesTot*0.92},{x:12,y:ChargesTot*0.89},{x:18,y:ChargesTot*0.87}]
const chargesMoins = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*0.99},{x:6,y:ChargesTot*0.985},{x:9,y:ChargesTot*0.97},{x:12,y:ChargesTot*0.965},{x:18,y:ChargesTot*0.95}]
const chargesMoy = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.01},{x:6,y:ChargesTot*1.02},{x:9,y:ChargesTot*1.04},{x:12,y:ChargesTot*1.05},{x:18,y:ChargesTot*1.07}]
const chargesPlus = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.05},{x:6,y:ChargesTot*1.08},{x:9,y:ChargesTot*1.10},{x:12,y:ChargesTot*1.11},{x:18,y:ChargesTot*1.15}]
const charges2Plus = [{x:-6,y:ChargesTot*0.95},{x:-3,y:ChargesTot*0.98},{x:0,y:ChargesTot},{x:3,y:ChargesTot*1.08},{x:6,y:ChargesTot*1.13},{x:9,y:ChargesTot*1.15},{x:12,y:ChargesTot*1.17},{x:18,y:ChargesTot*1.19}]
const [Pvente, setPV]= React.useState(ventesMoy)
const [ChargesF, setC]= React.useState(chargesMoy)
const Pvente2 = ventesMoy
const ChargesF2 = chargesMoy
.....
function handlePressV2M() {
setPV(ventes2Moins)
setBV2M('Checked')
setBVM('UnChecked')
setBVMoy('UnChecked')
setBVP('UnChecked')
setBV2P('UnChecked')
setMount(false)
}
.....
function handlePressC2M() {
setC(charges2Moins)
setBC2M('Checked')
setBCM('UnChecked')
setBCMoy('UnChecked')
setBCP('UnChecked')
setBC2P('UnChecked')
setMount2(false)
}
...
<GraphMarges dataPrix={Mount?Pvente2: Pvente} dataCharges={Mount2?ChargesF2:ChargesF} maximum={maximum} minimum={minimum}/>
.....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
useEffect after update state
useEffect not aware of state update
useEffect not firing on state update
UseEffect function to update a state variable
useEffect does not see the state update
useEffect: not rendering after update of state
How to update state object in useEffect
useState in useEffect does not update state
useEffect can't update the state
useEffect won't update state
Related Tags