【发布时间】：2022-07-08 15:21:21
【问题描述】：
嗨，我遇到了一个我不明白的问题：当我查看网络工具时，我可以看到我的状态是使用 useEffect 更新的，并且与该状态相关的一些 const 是更新的，但不是全部.
这是我的代码
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;
这是我的状态数据，当它们过去到另一个组件时：
{
"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
}
所以最大值是正确的数据，但不是假设放入图表的数据。 但是当我再次点击“Moy”时，数据就会出现。
谁能帮我理解一下？
【问题讨论】：
-
将 setPBTot 添加到 useEffect、useEffect(() => {}, [setPBTot]) 的列表依赖项中，并可能创建您的函数，因为 useCallbacks 可能是一个好方法
-
我要试试谢谢
-
我想我不明白你认为我在哪里使用 useCallback。因为我在 const ventesMoy 和chargesMoy 上尝试过，但它什么也没做。我也不能在状态声明中调用 ti 所以....
-
不，我的意思是你不使用它们，而不是函数 handlePressV2M() ...尝试像 const handlePressV2M = useCallback(() => {...}, [setPV, set ...])
-
@EdwynZN 它不起作用，因为我需要输入日期来更新状态并且我收到了这个警告：'ventesMoy' 数组使 useCallback Hook 的依赖项（在第 89 行) 在每次渲染时更改。为了解决这个问题，将 'ventesMoy' 的初始化包装在它自己的 useMemo() Hook react-hooks/exhaustive-deps
标签： reactjs state hook use-effect