我有一个常见的警告显示在加载我的网络应用程序,但再也没有。。。
警告:无法对已卸载的组件执行React状态更新。这是一个no-op,但它表示应用程序中存在内存泄漏。要修复此问题,请取消useEffect清理函数中的所有订阅和异步任务。
编辑****这是由这段代码引起的。我已经把范围缩小到一个函数。当我试图设置湿度状态时,它会爆炸。我不知道为什么。
function getData (){
Axios.get("http://localhost:3001/api/get-value").then((response) => {
const recievedData = response.data;
const dataValue = recievedData.map((val) => {
return [val.value]
})
if (loading === true){
setLoading(false);
}
return parseInt(dataValue);
}).then((resp)=>setMoisture(resp))
}
React.useEffect(() => {
if (moisture === "initialState"){
getData();
}
}, []);
在这里发布答案(根据评论)以确保完整性。
基本上,在useffect()的末尾使用局部变量和cleanup函数。以此为参考:
这里也有类似的情况
您应该在useEffect中声明函数,或者将其作为依赖项添加。一种方法是将函数移到钩子中。
// I assumed that your useState hooks looks something similar.
const [moisture, setMoisture] = React.useState('initialState')
const [loading, setLoading] = React.useState(true)
React.useEffect(() => {
function getData() {
Axios.get("http://localhost:3001/api/get-value").then((response) => {
const recievedData = response.data;
const dataValue = recievedData.map((val) => {
return [val.value]
})
if(loading === true) {
setLoading(false);
}
return parseInt(dataValue);
}).then((resp => setMoisture(resp)))
}
if (moisture === "initialState"){
getData();
}
}, [])
您可能还想先将数据设置为状态,然后将加载状态更改为false,这样可以防止出现一些bug。这是另一种方法来完成此操作并管理加载状态和promise
React.useEffect(() => {
function getData() {
setLoading(true)
Axios.get("http://localhost:3001/api/get-value")
.then((response) => {
const dataValue = response.data.map((val) => {
return [val.value]
})
// This is going to pass 0 when can't parse the data
setMoisture(parseInt(dataValue) || 0)
setLoading(false)
})
}
getData()
}, [])