React 和 Firebase 将文档添加到集合问题 - 警告：无法对未挂载的组件执行 React 状态更新

Question

我正在尝试将文档添加到Firebase集合中。它可以工作并添加文档，但我在我的反应控制台中收到以下警告 - 警告：无法对未挂载的组件执行 React 状态更新。这是无操作，但它表示应用程序中存在内存泄漏。若要修复，请取消组件将卸载方法中的所有订阅和异步任务。

这是我写的实用程序函数

export const addDocument = async (title) => {
const collectionRef = firestore.collection('collections')
const newDocRef = collectionRef.doc()
const snapshot = await newDocRef.get()
if(!snapshot.exists) {
try {
await newDocRef.set({
title,
items: []
})
} catch (e) {
console.error('Error creating document.', e.message)
}
}
}

这是我在其中调用实用程序的组件，并给了我错误

const AdminPage = () => {
const handleSubmit = () => {
addDocument('hat')
}
return (
<div>
<button onClick={handleSubmit}>Add Collection</button>
</div>
)
}

我所有的进出口都很好，我只是省略了它以使事情更简洁。

Answer 1

代码包含异步操作，因此您应该实现方法：componentWillUnmount

由于您的代码等待所有异步操作(我认为get和set(，因此在您的示例中不应该是这种情况。这只是一个警告，根据我的理解，它表明异步操作可能会在对象已被销毁时结束。

传递一些有趣的文章和问题： 一、二、三、四

如果您需要更多，可以在互联网上发表文章。 我希望它会有所帮助！