React Native出现Possible Unhandled Promise Rejection且id自增问题如何修复

问题原因 #

• 第一个错误：useEffect没有传入第二个依赖参数，这会导致组件每次渲染都会重新执行useEffect内的逻辑，每次fetch结束后调用setData/setLoading都会触发组件重渲染，形成无限循环，不断发起请求所以报错id持续增长。
• 第二个错误：finally方法需要接收回调函数作为参数，你直接写setLoading(false)会让这行代码同步立即执行，而非等待请求完成后执行，同时会导致promise异常没有被正确捕获，就是你看到的Possible unhandled promise rejection报错。

修复方法 #

仅需要修改你的useEffect部分代码即可：

useEffect(() => {
    fetch(covidURL)
        .then((response) => response.json())
        .then((json) => setData(json))
        .catch((error) => alert(error))
        .finally(() => setLoading(false)) // 改为回调函数形式，等待请求结束后执行
}, []) // 增加空依赖数组，仅在组件首次挂载时执行一次请求

修改完成后即可解决无限循环请求和promise未捕获异常的问题，报错提示会消失。

内容的提问来源于stack exchange，提问作者Mac EiEi