Question

我知道，是否应该让ComponentUpdate返回true componentDidUpdate才能运行。在我的情况下，我在chrome调试程序会话中遇到了无限循环。这可能会导致性能降低。我的主要问题是，如何实际使用componentDidUpdate？

state = { 
    cartItems: [] 
}


componentDidMount() {
        this.getCart();
    }


getCart = async () => {
        let cart = await API.getCart();
        if (cart) {
            this.setState({
                loading: false,
                cartItems: cart
            })
        }
        console.log(cart) //for checking it in chrome debugger
    }



shouldComponentUpdate(prevProps, prevState) {
        return prevState.cartItems != this.state.cartItems
    }


componentDidUpdate(prevProps, prevState) {
        if (prevState.cartItems != this.state.cartItems) {
            this.getCart();
        }
    }

Answer 1

您的问题不是shouldComponentUpdate。 componentDidUpdate

中的以下比较

componentDidUpdate(prevProps, prevState) {
    if (prevState.cartItems != this.state.cartItems) {
        this.getCart();
    }
}

由于比较数组的方式，该值始终为true，如果您将其与!==一起使用（推荐的方式），则比较结果始终为true。 / p>

在componentDidUpdate中，您正在呼叫getCart，导致组件更新
在componentDidUpdate中，您再次调用getCart，导致组件更新，再次调用getCart，依此类推。

要么对deep comparison的每个项目执行cartItems，要么检查length属性（在某些情况下可以工作）。或者，如果订单无关紧要，您可以使用JSON.stringify

componentDidUpdate(prevProps, prevState) {
    if (JSON.stringify(prevState.cartItems) !== JSON.stringify(this.state.cartItems)) {
        this.getCart();
    }
}

要达到预期的行为（每次将项目添加到cartItems时都要重新获取，您可以执行以下操作

class Cart extends React.Component{
    state = {
        items : []
    }

    componentDidMount(){
        getCart()
    }

    addItem = item =>{
        this.setState(prevState => ({
            items : prevState.items.concat(item)}
        ), this.getCart)
    }



    render(){
        return <button onClick={() => this.addItem('item')}>Add</button>
    }
}

通过使用setState的第二个参数，您可以确保state中的所有更改均已完成，一旦添加了item，组件将再次获取，但是这次没有循环

如何在React Native中将componentDidUpdate与shouldComponentUpdate一起使用？

1 个答案: