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
    // ...

你为什么会选择其中之一？第一种情况对于渲染更有用。如果您正在获取的数据是您依赖显示的内容，那么您需要处理没有它的时间。第二种情况对于您仅在内部使用的数据更有用。 （也许是日志记录或指标，或者您只是在测试某些东西是如何工作的。）