我有一个 RN 应用,在安装组件(“收藏夹”屏幕)时,我会从 Firebase 读取数据,并将其设置为收藏夹组件随后渲染的状态。
但是当我在另一个屏幕上并将项目添加到 firebase 中的收藏夹数据库时,我收到黄色警告:
警告:只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState、replaceState 或forceUpdate。
当我添加一个新项目并更新 firebase.database().ref('userfavs').child(DeviceID)
中的数据时,会弹出此消息。需要明确的是,该功能似乎没有损坏,当我从状态控制台注销 datalist
数组时,新的“收藏夹”项目会按预期添加到那里。
class Favorites extends React.Component {
constructor(props) {
super(props);
this.state = {
datalist: []
};
this.favsRef = firebase.database().ref('userfavs').child(DeviceID);
}
listenForItems(favsRef) {
favsRef.on('value', (snap) => {
var items = [];
snap.forEach((child) => {
items.push(child.val()
);
});
});
this.setState({
datalist: items
});
});
}
componentWillMount() {
this.listenForItems(this.favsRef);
}
render() {
console.log('state datalist:', this.state.datalist);
... }}
我不太明白这个错误,因为我已将 listenForItems
调用放在 componentWillMount
下,所以每当我导航到“收藏夹”屏幕和此组件时加载时,它会拉取 Firebase 中的最新数据。
谢谢!
最佳答案
您可能正在添加一个监听器,以便在卸载后将您的收藏夹组件保留在内存中。
根据文档,有一个 .off
方法用于分离监听器:
https://firebase.google.com/docs/reference/js/firebase.database.Query#off
解决方案类似于:
class Favorites extends React.Component {
constructor(props) {
super(props);
this.state = {
datalist: []
}
this.favsRef = firebase.database().ref('userfavs').child(DeviceID);
this.listen = snap => {
const dataItems = snap.map(child => child.val())
this.setState({dataItems})
}
}
componentDidMount() { this.favsRef.on('value', this.listen) }
componentWillUnmount() { this.favsRef.off('value', this.listen) }
关于javascript - react native 错误: Can only update a mounted or mounting component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49581762/