Question

我有一个 Main.js 组件，该组件可以路由到各种组件，包括 Listing.js 。

主要：它包含添加到购物车中的一系列产品作为状态。
列表：这是产品列表。它包含数据库中所有产品的状态。

我的问题：当我通过单击“列表”组件中的按钮将产品添加到购物车时，它将产品添加到购物车，更新了购物车的状态购物车 主要组件。这样，列表组件将重新呈现，并且我松散了访客在列表上设置的所有过滤器。

我想防止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'))});
    }

    render() {
        return (
            <div className='main'>
                <Header cart={this.state.cart} />
                <Switch>
                    <Route path='/listing' component={() => <List addToCart={this.addToCart} />} />
                </Switch>
            </div>
        );
    }
}

export default withRouter(Main);

List.js ，产品列表：

import React from "react";
import {Product} from "./Product";
import Data from '../../Utils/Data';
import {Search} from "./Search/Search";

export class List extends React.Component
{

    state = {
        serie: '',
        products: [],
        filteredProducts: [],
    };

    addToCart = this.props.addToCart;

    obtainProducts = (request = {}) => //searches for products in database
    {
        Data.products.obtain(request).then(products => {
            this.setState({products:products, filteredProducts: products});
        });
    };

    displayProducts = () => {
        //Only products that has title
        const products = this.state.filteredProducts.filter(product => {return product.title;});

        //Returns REACT COMPONENT
        return products.map(product => {
            return <Product
                key={product._id}
                product={product}
                addToCart={this.addToCart}
            />
        });
    };

    searchHandler = (collection, types) =>
    {

        let filteredProducts = this.state.products;
        if(collection.length)
            filteredProducts = filteredProducts.filter(product => {return collection.includes(product.series);});
        if(types.length)
            filteredProducts = filteredProducts.filter(product => {return types.includes(product.type);});

        this.setState({filteredProducts: filteredProducts});
    };

    componentWillMount()
    {
        //init products collection
        this.obtainProducts();
    }

    render()
    {
        const productComponents = this.displayProducts();
        console.log('test');
        return(
            <section className='listing'>
                <Search searchHandler={this.searchHandler} />
                <div className='listing-content grid-4 has-gutter'>
                    {productComponents}
                </div>
            </section>
        )
    }
}

Answer 1

如果您在Route中将匿名函数传递给component prop，则每次都会重新呈现。而是将路线设置为：

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

从反应路由器docs报价：

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

Answer 2

在react中包装匿名函数中的元素会使该元素在每个渲染器上重新实例化（在某些情况下）。

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

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

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

2 个答案: