提问者:小点点

反应带嵌套异步函数的js useEffect


我有一个常见的警告显示在加载我的网络应用程序,但再也没有。。。

警告:无法对已卸载的组件执行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();
    }
}, []); 

共2个答案

匿名用户

在这里发布答案(根据评论)以确保完整性。

基本上,在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()
  }, [])

相关问题