如何解决Promise 中的 ComponentDidMount 未捕获错误
我有一个函数需要按设定的顺序触发,以便我可以从登录用户那里接收书籍。现在这个功能部分工作。当我刷新页面时它不起作用。它说承诺中有一个未发现的错误。我需要 getBooks 函数在控制台日志触发之前完成。这是怎么写的?
async componentDidMount() {
this.props.getBooks({
user: this.props.auth.user.id
})
const wishlistbooks = this.props.auth.wishlistbooks;
console.log(`WISHLIST:${wishlistbooks[0].book.title}`)
}
getBooks 方法
export const getBooks = (user) => dispatch => {
axios
.get("/api/users/wishlist",{
params: {
id: user
}
})
.then(res => {
const response = res.data;
dispatch(setWishlist(response));
})
// .then(response => {
// console.log(response)
// dispatch(setWishlist({response}))
// })
.catch(() =>{
console.log("Error!")
})
};
export const setWishlist = response => {
console.log(response)
return {
type: WISHLIST_LOADING,payload: response
};
};
解决方法
要么 a) 将异步数据的触发与该数据的使用分开,要么 b) 深入了解它的异步性质,然后等到它结束。
在第一种情况下,使用数据(您的 console.log)将在 render
方法中处理。在这种情况下,您的渲染方法需要能够处理没有可用数据的渲染(例如渲染 loading...
消息或其他内容。)
render() {
if (!this.props.auth.wishlistbooks) {
return 'Loading...'
}
const wishlistbooks = this.props.auth.wishlistbooks;
return <>WISHLIST: {wishlistbooks[0].book.title}
}
在第二种情况下,await getBooks
并确保您从中返回 axios 调用。
async componentDidMount() {
await this.props.getBooks({ // this causes componentDidMount to wait for getBooks to complete
user: this.props.auth.user.id
})
const wishlistbooks = this.props.auth.wishlistbooks;
console.log(`WISHLIST:${wishlistbooks[0].book.title}`)
}
export const getBooks = (user) => dispatch => {
return axios.get("/api/users/wishlist",{ // returning the axios.get passes the promise back up to componentDidMount
// ...
你为什么会选择其中之一?第一种情况对于渲染更有用。如果您正在获取的数据是您依赖显示的内容,那么您需要处理没有它的时间。第二种情况对于您仅在内部使用的数据更有用。 (也许是日志记录或指标,或者您只是在测试某些东西是如何工作的。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。