react hooks 模式下 在useEffect中更新state导致警告问题

Question

//关键代码
const [pondBalance, setPondBalance] = useState(0)

useEffect(() => {
    getPondInfo()
    return () => {}
  }, [])

const getPondInfo = () => {
    pondInfo().then(res => {
      pondBalance = setPondBalance(res.pondBalance)
    }).catch(err => {
      console.log(err.message)
    })
  }

这段代码导致会出现一个问题，就是我进入页面的时候会去请求pondInfo接口，并等待响应后更新state
但是如果再等待响应阶段离开页面，控制台就会出现警告Can't perform a React state update on an unmounted component.
请问这种情况下应该怎么处理，因为这个并不是一个定时器，所以也无法再useEffect的return函数中进行清除操作

在Class中setState有回调函数，那useState有相关的操作吗？

Answer 1

实际上 现在不少都存在这样的问题...

1. 把数据往上提, 使用 redux 等 方式
2. 参考 https://github.com/bsonntag/r... , 提供 cancel , 即 xhr 的 abort .

Answer 2

代码在这里

但是因为后端是http的 所以可能没法在线测试 你copy到自己机子试试

大体意思就是改造这里

Answer 3

自己想了个骚操作,因为封装的axios请求，在当前请求处于pending时重复发起请求，会关闭上一个处于pending状态的请求，所以在useEffect的return中再次调用getPondInfo并传递一个close的状态，阻止setState操作，从而解决了这个问题

不过，有没有其他的解决方法？ 或者更优雅的写法

const [pondBalance, setPondBalance] = useState(0)

useEffect(() => {
    getPondInfo()
    return () => {
      getPondInfo(true) //在卸载函数中传入一个判断值
    }
  }, [])

const getPondInfo = (close) => {
    pondInfo().then(res => {
      if(close) return //阻止更新state
      pondBalance = setPondBalance(res.pondBalance)
    }).catch(err => {
      console.log(err.message)
    })
  }