ComponentDidUpdate 导致 Ajax 请求无限循环

编程问答 2022-04-25

问题描述

我正在开发一个应用程序，它调用一个函数来获取某人保存的书籍列表。当有人从列表中删除一本书时，我希望该页面自动更新。我遇到的问题是 ComponentDidUpdate 导致的无限循环。

我已经阅读了一些答案并尝试使用不同的原始类型进行比较，但我仍然遇到无限循环。

这是愿望清单组件的一部分

class Wishlist extends Component {

    constructor(){
        super();
        this.state = {
            books: [],errors: {},};
    }


    async componentDidMount() {
         await this.props.getBooks({
            user: this.props.auth.user.id
        
        })
        this.setState({books:this.props.auth.wishlistbooks})
    }


    async componentDidUpdate() {
     
        await this.props.getBooks({
           user: this.props.auth.user.id
       
       })


       if (this.state.books[0].book._id != this.props.auth.wishlistbooks[0].book._id) {
       this.setState({books:this.props.auth.wishlistbooks})

    }
    else {
        console.log("no update")
    }
   }

这是具有 getBooks 函数的操作文件的一部分

export const getBooks = (user) => dispatch => {

    return axios
        .get("/api/users/wishlist",{
            params: {
                id: user
            }
        })
  
        .then(res => {
            const response = res.data;
            dispatch(setWishlist(response));
        })

        .catch(() =>{
            console.log("Error!")
        })
    };
    
    export const setWishlist = response => {
        console.log(`setWishlist response ${response}`)
        return {
            type: WISHLIST_LOADING,payload: response
        };
    };

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxcomponentscomponentslifecyclelifecyclereactjsreactjsreactjsreactjs