javascript - 重定向后调用 ComponentWillMount
问题描述
因此,当我在图书页面上并单击按钮将其删除时,它应该重定向到我的用户配置文件并从数据库中删除图书。但是发生的情况是再次为 Book 调用 ComponentWillMount 并且找不到它。也许我对这些生命周期方法没有清楚的了解,但我认为 ComponentWillMount 在第一次渲染时只会被调用一次?还使用 Firebase 作为数据库。
这是相关代码(其中 Book == WIP):
WIP.js
componentWillMount() {
this.WIPRef.on('value', snapshot => {
let WIP = snapshot.val()
this.setState({
title: WIP.title ? WIP.title : "",
wordCount: WIP.wc ? WIP.wc : "",
logline: WIP.logline ? WIP.logline : "",
draft: WIP.draft ? WIP.draft : "",
language: WIP.language ? WIP.language : "",
disclaimers: WIP.disclaimers ? WIP.disclaimers : "",
improvementAreas: WIP.improvementAreas ? WIP.improvementAreas : "",
blurb: WIP.blurb ? WIP.blurb : "",
additionalNotes: WIP.additionalNotes ? WIP.additionalNotes : "",
writer: WIP.writer ? WIP.writer : "",
genres: WIP.genres ? WIP.genres : [],
types: WIP.types ? WIP.types : []
});
var promises = []
var writerRef = firebaseDB.database().ref(`/Users/${WIP.writer}`)
promises.push(writerRef.once('value'));
Promise.all(promises).then((snapshots) => {
snapshots.forEach((snapshot) => {
var writer = snapshot.val()
this.setState({
writerName: writer.displayName ? writer.displayName : ""
})
})
})
})
}
removeWIP(WIPId) {
this.setState({ redirect: true })
const usersWIPRef = firebaseDB.database().ref(`/Users/${this.state.writer}/WIPs/${this.state.wipId}`)
this.deleteWIPIndexRecord(this.state.wipId)
usersWIPRef.remove();
this.WIPRef.remove();
}
deleteWIPIndexRecord(wipId) {
const WIPRef = firebaseDB.database().ref(`WIPs/${wipId}`);
WIPRef.on('value', snapshot => {
// Get Algolia's objectID from the Firebase object key
const objectID = snapshot.key;
// Remove the object from Algolia
wipsIndex
.deleteObject(objectID)
.then(() => {
console.log('Firebase object deleted from Algolia', objectID);
})
.catch(error => {
console.error('Error when deleting contact from Algolia', error);
process.exit(1);
});
})
}
render() {
if (this.state.redirect === true) {
return <Redirect to= {{pathname: '/user/' + this.state.writer}} />
}
return(
<Button className="black-bordered-button"
onClick={() => this.removeWIP(WIP.id)}
>
Remove Item
</Button>
)
}
但是当我删除这本书时,我收到了这个错误:
Uncaught TypeError: Cannot read property 'title' of null
从这一行开始ComponentWillMount
title: WIP.title ? WIP.title : ""
解决方案
推荐阅读
- aws-lambda - 从 DynamoDB 流式传输数据到 elasticsearch 失败,“没有 [indices:data/write/bulk] 的权限”
- ruby-on-rails - 在 Rails 中遍历单个 ActiveRecord 对象
- css - 我由 Vue 创建的#app div 没有占据页面的完整大小
- tkinter - 接收从按钮调用的函数返回的内容的正确方法,将其存储为函数外部的另一个变量
- ios - 苹果登录:如何计算用户ID?
- ruby-on-rails - 如何为清仓用户设置会话长度?
- javascript - 谷歌图表控件 - 最小和最大输入字段而不是滑块
- excel - Excel VBA:内部颜色
- python - 将 multipart/form-data 转换为 dict python
- visual-studio - Visual Studio 不接受 Nugget 包的 UWP 版本?