Javascript 反应-Can'；找不到漏洞，怀疑无限状态声明

我完全是React的初学者，我对我的第一个应用程序非常满意，因为我可能有内存泄漏？在输入值后，点击右下角的添加按钮后，我的应用程序非常滞后，我怀疑我没有像应该的那样使用“useState”？我不知道，我已经找了好几个小时了：（

以下是应用程序：

代码如下：

在App.js（父项）中：

import React，{useState}来自“React”
从“/firebase”导入firebase
从“./AddForm”导入AddForm
从“/ListingExpansionPanels”导入ListingTable
从“时刻”导入时刻
//材料界面
从“@material ui/core”导入{CssBaseline}
从“@material ui/core/Grid”导入网格
从“@material ui/core/Snackbar”导入Snackbar
从“@material ui/lab/Alert”导入MuiAlert
导入“./styles.css”
导出默认函数应用程序（）{
//BDD
const dbRef=firebase.database（）.ref（'items'））
//列表数据
常量[listingData，setListingData]=useState（[{}]）
dbRef.once（'值'，（快照）=>{
const releves=snapshot.val（）
常量列表数据=[]
for（对象条目的常量[键，释放]（释放））{
listingData.push({
钥匙：钥匙，
月份：relve.month，
加斯：releve.gaz，
电工，
总计：relve.total，
提交日期：relve.submissionDate
})
}
const listingDataSorted=listingData.sort（（a，b）=>（a.submissionDate>b.submissionDate）？1:-1）
setListingData（listingDataSorted）
})
const lastItemIndex=listingData.length-1
//月份
const[selectedDate，handleDateChange]=useState（新日期（））
const dateFormat=时刻（selectedDate）。格式（'MMMM'）
//电工
常量constElec={prix:0.15356，abo:117.56}
const[kw，setKw]=使用状态（“”）
const diffElec=kw-listingData[lastItemIndex]。电工
const resultatElec=Math.round（（constElec.prix*differlec+（constElec.abo/12））*1e2）/1e2
//加兹
const constGaz={prix:0.0681，abo:215.73，indice:11.34}
const[m3，setm3]=useState（“”）
const diffGaz=m3-列表数据[lastItemIndex].gaz
const resultagaz=Math.round（（（constGaz.indice*diffGaz）*constGaz.prix）+（constGaz.abo/12））*1e2）/1e2
//总数
常量总计=数学舍入（（resultatElec+ResultateGaz）*1e2）/1e2
//提交
常量handleSubmit=（）=>{
常数相关={
提交日期：时刻（selectedDate）.unix（），
月份：日期格式，
加沙：立方米，
电力：千瓦，
总计：总计
}
dbRef.push（relve）
SetOpenSnapshot（真）
setm3（“”）
setKw（“”）
}
//删除
const handleDelete=key=>{
dbRef.child（key.remove（））
}
//小吃条
功能警报（道具）{
返回
}
const[openSnack，setOpenSnack]=React.useState（false）
const handleClose=（事件、原因）=>{
如果（原因==‘单击离开’）{
返回
}
SetOpenSnapshot（错误）
}
返回(
能量清汤
索维嘉德酒店
)
}

在AddForm.js（child-我正在使用材质UI）中：

从“React”导入React
从“@material ui/core/TextField”导入TextField
从“@material ui/core/inputadornation”导入输入
从“@material ui/core/Button”导入按钮
从“@material ui/icons/CloudUpload”导入CloudUploadIcon
从“@material ui/pickers”导入{MuiPickersUtilsProvider，DatePicker}
从“@date io/moment”导入MomentUtils
从“时刻”导入时刻
导入“时刻/区域设置/fr”
从“@material ui/core/Dialog”导入对话框
从“@material ui/core/DialogActions”导入DialogActions
从“@material ui/core/DialogContent”导入DialogContent
从“@material ui/core/DialogTitle”导入DialogTitle
从“@material ui/core/Fab”导入晶圆厂
从“@material ui/icons/Add”导入AddIcon
导出默认函数AddForm（{m3，setm3，kw，setKw，handleSubmit，selectedDate，handleDateChange}）{
const handleUpdateGaz=功能（事件）{
setm3（编号（事件目标值））
}
const HANDLEUPDATEW=功能（事件）{
setKw（数字（事件目标值））
}
moment.locale（'fr'）
const[open，setOpen]=React.useState（false）
常量handleClickOpenAddDialog=（）=>{
setOpen（真）
}
常量handleCloseAddDialog=（）=>{
setOpen（假）
}
返回(
瓦勒鲁斯主菜酒店
证实人
复述
)
}

很确定这是不相关的，但下面是ListingExpansionPanel.js

从“React”导入React
从“@material ui/core/ExpansionPanel”导入ExpansionPanel
从“@material ui/core/ExpansionPanelSummary”导入ExpansionPanelSummary
从“@material ui/core/ExpansionPanelDetails”导入ExpansionPanelDetails
从“@material ui/core/Typography”导入排版
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon
从“@material ui/core/Icon”导入图标
从“@material ui/core/Grid”导入网格
从“@material ui/core/Button”导入按钮
从“@material ui/core/Chip”导入芯片
从“react SwipeableView”导入SwipeableView
导出默认函数ListingTable（{listingData，handleDelete}）{
const dataRow=listingData.map（（数据，键）=>(
今天的日历
{data.month}{data.total？'：'+data.total+'€'：'}
2020
权力
{data.electricite}Kwh
// pass the reference to changeKw instead of creating an anonymous function:
<TextField
    value={kw}
    onChange={changeKw} // e will be passed automatically
/>

const changeKw = e => {
    console.log(e.target.value) // e gets passed
    setKw(e.target.value)
}