在父组件购物车状态更新时，如何防止我的产品列表重新呈现？

Question

我有一个Main.js组件，它路由到各种组件，包括Listing.js。Main：它包含添加到购物车的一系列产品作为状态。列表：它是产品的列表。它包含数据库中的所有产品作为状态。我的问题：当我通过点击List组件的按钮将产品添加到购物车，它增加了产品加入购物车，更新状态，车的主要组成部分。这样做后，List组件会重新呈现，并且我会取消访问者在列表中设置的所有过滤器。我想阻止 List 在其父组件的购物车状态更改时重新呈现。你知道如何做到这一点吗？我已经尝试过使用 shouldComponentUpdate，但没有成功。Main.js（父组件）import React from 'react';import {Switch, Route, withRouter, Link} from "react-router-dom";import {List} from "./Listing/List";class Main extends React.Component{    state={        cart:[],    };    removeFromCart = product => //REMOVES PRODUCT FROM CART    {        let cart = this.state.cart;        cart.map(item => {            if(item._id === product._id)            {                item.count--;                return item;            }        });        cart = cart.filter(item => item.count > 0);        this.setState({cart:cart}, () => {sessionStorage.setItem('cart', JSON.stringify(cart));});    };    addToCart = product => //ADD PRODUCT TO CART    {        let cart = this.state.cart;        let productExists = this.state.cart.map(item => {return item._id === product._id}).includes(true);        if(productExists)        {            cart = cart.map(item => {                if(item._id === product._id)                {                    item.count++;                    return item;                }                else                {                    return item;                }            });        }        else        {            product.count = 1;            cart.push(product);        }        this.setState({cart: cart}, () => {sessionStorage.setItem('cart', JSON.stringify(cart));});    };    componentWillMount()    {        if(sessionStorage.getItem('cart')) this.setState({cart:JSON.parse(sessionStorage.getItem('cart'))});    }

Answer 1

如果您将匿名函数传递给componentRoute 中的 prop，它每次都会重新渲染。相反，将您的路线设置为：

<Route path='/listing' render={() => <List addToCart={this.addToCart} />} />

引用反应路由器文档：

当您使用组件（而不是渲染或子组件，如下所示）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件 prop 提供内联函数，您将在每次渲染时创建一个新组件。这会导致卸载现有组件并安装新组件，而不仅仅是更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具

Answer 2

在 react 的匿名函数中包装元素会导致该元素在每次渲染时重新实例化（在某些情况下）。

我认为问题在于您如何使用该Route组件。使用children道具可能会使这更直观。

<Route path='/listing'>

 <List addToCart={this.addToCart} />

</Route>