Javascript 导致侧栏重新加载的状态更改

我正在建立一个网上商店。当您单击“结帐”按钮时，一个侧边栏滑入视图，显示购物车中的项目列表。购物车的内部是它的物品列表。您可以通过切换引导提供的

表单中的上/下箭头来更改数量

我的代码的工作方式是，当您切换向上/向下箭头以添加或减少产品数量时，父级中关于购物车中的内容的状态会发生变化。这将触发子购物车侧边栏关闭，然后重新打开。我不想发生这种事！侧边栏应该保持打开状态

我试过两件事；一种方法是使用event.preventDefault（）尝试并使其不刷新页面，但这种方法不起作用

另一件事是尝试使用
shouldComponentUpdate
并检查项目数量是否已更改，然后防止应用程序重新呈现。这是我使用的代码：

  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextState.cart &&
      nextState.cart.length > 0 &&
      this.state.cart.length > 0
    ) {
      console.log("Next state cart num= " + nextState.cart[0].num)
      console.log("curr state cart num= " + this.state.cart[0].num)
      if (nextState.cart[0].num != this.state.cart[0].num) {
        return false;
      }
    }

    return true;
  }

问题是我以前和将来的道具是一样的！因此，我无法编写任何代码来阻止对项目数量更改进行重新渲染

有人能提供一些建议吗？
如果您的组件正在重新渲染，但其道具和状态根本没有改变，那么您可以通过使用函数或使用基于类的组件而不是React.component来防止这种情况

这两种方法都将进行浅层的道具和状态比较，并根据所述比较的结果决定是否重新渲染。如果下一个道具和状态与之前相同，则不会触发重新渲染

这里有一个例子，你可以决定用哪一个

class App extends React.Component {
    state = {
        count: 0
    };

    handleClick = event => {
        event.preventDefault();
        this.setState(prevState => ({ count: prevState.count + 1 }));
    };

    render() {
        return (
            <div>
                <span>Click counter (triggers re render): {this.state.count}</span>
                <button style={{ marginLeft: "10px" }} onClick={this.handleClick}>
                    Click me to re render!
                </button>
                <SingleRenderClassComponent />
                <SingleRenderFunctionComponent />
                <AlwaysReRenderedClassComponent />
                <AlwaysReRenderedFunctionComponent />
            </div>
        );
    }
}

class SingleRenderClassComponent extends React.PureComponent {
    render() {
        console.log("Rendered React.PureComponent");
        return <div>I'm a pure component!</div>;
    }
}

const SingleRenderFunctionComponent = React.memo(
    function SingleRenderFunctionComponent() {
        console.log("Rendered React.memo");
        return <div>I'm a memoized function!</div>;
    }
);

class AlwaysReRenderedClassComponent extends React.Component {
    render() {
        console.log("Rendered React.Component");
        return <div>I'm a class!</div>;
    }
}

function AlwaysReRenderedFunctionComponent() {
    console.log("Rendered function component");
    return <div>I'm a function!</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));


类应用程序扩展了React.Component{
状态={
计数：0
};
handleClick=事件=>{
event.preventDefault（）；
this.setState（prevState=>（{count:prevState.count+1}））；
};
render（）{
返回(
单击计数器（触发器重新呈现）：{this.state.count}
单击我重新渲染！
);
}
}
类SingleRenderClassComponent扩展了React.PureComponent{
render（）{
log（“Rendered React.PureComponent”）；
返回我是一个纯组件！；
}
}
const SingleRenderFunctionComponent=React.memo(
函数SingleRenderFunctionComponent（）{
console.log（“Rendered React.memo”）；
返回我是一个记忆功能！；
}
);
类AlwaysRenderedClassComponent扩展React.Component{
render（）{
console.log（“呈现的React.Component”）；
返回我是一个阶级！；
}
}
函数AlwaysRenderedFunctionComponent（）{
log（“呈现功能组件”）；
返回我是一个函数！；
}
render（，document.getElementById（“根”））；
我真的很感谢您的回复——当我第一次读到它时，这似乎是一个很好的答案。不幸的是，在将我的组件更改为PureComponent之后，我没有任何运气。考虑到你的逻辑，我不知道为什么它不起作用。