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

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&nbsp;path='/listing'&nbsp;render={()&nbsp;=>&nbsp;<List&nbsp;addToCart={this.addToCart}&nbsp;/>}&nbsp;/>引用反应路由器文档：当您使用组件（而不是渲染或子组件，如下所示）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件 prop 提供内联函数，您将在每次渲染时创建一个新组件。这会导致卸载现有组件并安装新组件，而不仅仅是更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具

Answer 2

在 react 的匿名函数中包装元素会导致该元素在每次渲染时重新实例化（在某些情况下）。我认为问题在于您如何使用该Route组件。使用children道具可能会使这更直观。<Route path='/listing'>&nbsp;<List addToCart={this.addToCart} /></Route>