Promise 中的 ComponentDidMount 未捕获错误

Question

我有一个功能，我需要按设定的顺序触发，这样我才能从登录用户那里接收书籍。现在这个功能部分起作用。当我刷新页面时它不起作用。它说承诺中有一个未发现的错误。我需要 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
        };
    };

Answer 1

要么 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 并确保你 return 从它调用 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
    // ...

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

Promise 中的 ComponentDidMount 未捕获错误

ComponentDidMount Uncaught Error in Promise

javascript

methods

page-lifecycle

reactjs