React map() function 只触发一次

Question

我有一个电子商务网站和一个根据品牌过滤产品的过滤器。

我的减速机：

const INITIAL_STATE = {
  products: [
    {
      id: 1,
      type: "joggers",
      category: "pant",
      gender: "female", 
      color: "Green",
      brand: "Wrangler",
      name: "Camo Print Joggers Pants",
    },
    {
      id: 2,
      type: "joggers",
      category: "pant",
      gender: "male",
      color: "Green",
      brand: "US Polo Assn",
      name: "Camoflage Print Slim Fit Jogger Pants",
    },  
  ],
  brands: ["Wrangler", "Vermo Moda", "AJIO", "HRX", "Nike", "Puma", "US Polo Assn", "Levis", "The Roadster", "H & M", "Jack & Jones"],
  
  refinedProducts: [],
};


const shopReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    
 case actionTypes.REFINE_BY_BRAND:
  
  if (action.payload.boolVal === true) {
    INITIAL_STATE.products.forEach((element) => {
      if(element.brand === action.payload.brand){
        state.refinedProducts.push(element);
      }
    });
      return {
        ...state,
        products: state.refinedProducts,
      };
  }
  else{
    INITIAL_STATE.products.forEach((element) => {
      if(element.brand === action.payload.brand){
        state.refinedProducts.pop(element);
      }
    });
    return {
      ...state,
      products: state.refinedProducts,
    };
  }

    
    default:
      return state;
  }
};

export default shopReducer;

我的 REACT 组件代码：

import React from 'react';
import "./crownFashionStore.css"
import { connect } from "react-redux";
import { refineByFemale, refineByMale, refineByBrand, refineByColor } from "../../redux/shop/shop-actions";
import Product from '../product/Product';


function CrownFashionStore(props) {
    console.log(props);
  return (
    <div className="shop-container">       
          <div className="brands">
            <p>Brands</p>
            {props.brands.map((brand, index) => {
              return (
                <div key={index} className="filter">
                  <input
                    value={brand}
                    onClick={(e) => {
                      const brand = e.target.value;
                      const boolVal = e.target.checked;
                      props.refineByBrand(brand, boolVal);
                      console.log(props);
                    }}
                    type="checkbox"
                  />
                  <label htmlFor="">{brand}</label>
                </div>
              );
            })}
          </div>

        <div className="body-right">
          {props.products.map((product) => {
            return <Product key={product.id} data={product} />; //<-- triggers only once
          })}
        </div>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    products: state.shop.products,
    brands: state.shop.brands,
    refinedProducts: state.shop.refinedProducts,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    refineByBrand: (brand, boolVal) => dispatch(refineByBrand(brand, boolVal)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CrownFashionStore);

每当我单击用于筛选产品品牌的输入复选框时，map function 就会被触发并在屏幕上呈现所需的产品。 但是当我点击其他品牌时，状态（产品）会相应发生变化，但问题是 Map function 没有被第二次触发，因此无法获得 Z78E6221F6393D1356681DB398F14CEDZ 所需的结果。 有人可以帮我找出我在这里犯的错误吗

Answer 1

将产品更改为组件中的提炼产品，并将您的减速器更改为以下代码

case actionTypes.REFINE_BY_BRAND:

if (action.payload.boolVal === true) {
  const filteredProduct = Array.from(state.products);
  return {
    ...state,
    refinedProducts: filteredProduct.filter(a=>a.brand === action.payload.brand),
  };
}
else{
 const filteredProduct = Array.from(state.refinedProducts);

   return {
    ...state,
    refinedProducts: filteredProduct.filter(a=>a.brand !== action.payload.brand),
   };
 }