javascript - 无法使用 reducer 中的条件语句更改处于状态的数组的第二个值 --- Redux

Question

我现在有点卡住了。我试图将一个 bool 值传递到操作中，然后在reducer中使用一个case(FILTER_SIZE)，它将display_clothing数组的值设置为具有相同sizeID的元素，或者清空display_clothing数组，这会导致我的项目页面恢复返回以显示所述服装数组中的服装项目，而不是显示的_服装中过滤后的项目。

根据我拥有的 console.logs，filtered_clothes 似乎在 if-else 语句之后没有改变其值。注意:我将filtered_clothes 设为const，但在if-else 语句期间出现无效赋值错误，因此我使用let 代替。 (说实话，我不确定为什么它不起作用，因为我在 BUY ITEMS 案例中使用 const 做了类似的事情)

ItemGrid.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { addITEM, addFAVORITE, filterSIZE } from '../actions';
// import Slider from 'react-rangeslider'
import '../styles.css';
// import 'react-rangeslider/lib/index.css'


class ItemGrid extends Component {
  constructor(props){
    super(props);

    this.state = {
      checked: false
    }

    this.openSearchBar = this.openSearchBar.bind(this);
    this.addFavorite = this.addFavorite.bind(this);
    this.addToCart = this.addToCart.bind(this);
    this.filterSize = this.filterSize.bind(this);

  }

  openSearchBar() {
    this.setState({showSearchBar: !this.state.showSearchBar});
  }

  addFavorite = (event, item) => {
    this.props.addFAVORITE(item);
  }

  addToCart = (event, item) => {
    this.props.addITEM(item);
  }

  filterSize = (event, size, checked_status) => {
    checked_status = !checked_status;
    console.log('filterSize');
    this.setState({checked: checked_status});
    event.preventDefault();

    console.log(checked_status)
    this.props.filterSIZE(size, checked_status);
  }

  handleChangeStart = () => {
    console.log('Change event started')
  };

  handleChange = value => {
    this.setState({
      value: value
    })
  };

  handleChangeComplete = () => {
    console.log('Change event completed')
  };

  renderClothing(){
    return this.props.clothing.map((item) => {
      return(
        <div className="item-product" key={item.id}>
          <img className="item" src={item.imgSrc} alt="clothing item" />
          <i className="fa fa-heart fav-icon pointer" aria-hidden="true" onClick={(event) => this.addFavorite(event, item)}></i>
          <p className="item-name">{item.name}</p>
          <p className="item-price">${item.price}</p> <button className="addtoCart_btn" onClick={(event) => this.addToCart(event, item)}>Add</button>
        </div>
      )
    }
  )
}



  render(){
    console.log('props')
    console.log(this.props.clothing)
    return(
      <div id="item-area">
        <div id="side-menu">
          <h3>Filters</h3>
          <div className="size-box">
            <h5>Size:</h5>
            <ul>
              <li className="">
                <a href="/item" onClick={(event) => this.filterSize(event, 1, this.state.checked)}>
                  <label className="container">XS
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">S
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">M
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">L
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">XL
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">XXL
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
            </ul>
          </div>
          <div className="color-box">
            <h5>Color:</h5>
            <ul className="color-list">
              <li className="swatch color-swatch-black pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-blue pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-red pointer">
                <a href="/item">  </a>
              </li>   <br />
              <li className="swatch color-swatch-nude pointer">
                  <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-white pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-grey pointer">
                <a href="/item">  </a>
              </li>   <br />
              <li className="swatch color-swatch-purple pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-brown pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-yellow pointer">
                <a href="/item">  </a>
              </li>  <br />
              <li className="swatch color-swatch-orange pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-pink pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-green pointer">
                <a href="/item">  </a>
              </li>  <br />
            </ul>
          </div>
          <div className="price-range">
            <h5 className="">Price:</h5>
            <ul className="prices">
              <li><a href="/item" className="pointer">$10</a></li>
              <li><a href="/item" className="pointer">$20</a></li>
              <li><a href="/item" className="pointer">$30</a></li>
              <li><a href="/item" className="pointer">$40</a></li>
              <li><a href="/item" className="pointer">$50</a></li>
              <li><a href="/item" className="pointer">$100</a></li>
            </ul>
          </div>
        </div>
        <div id="item-grid">
          {this.renderClothing()}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('State in ItemGrid')
  console.log(state)
  console.log(state.apps.clothing)
  console.log(state.apps.displayed_clothing)
  if (state.apps.displayed_clothing === undefined | state.apps.displayed_clothing.length === 0){
    return {clothing: state.apps.clothing}
  };
  return{clothing: state.apps.displayed_clothing}
}

export default connect(mapStateToProps, {addITEM, addFAVORITE, filterSIZE})(ItemGrid);

app.js(Reducer 文件)

const initialState = {
      search: 'hi',
      act: {
        cart: [],
        history: [],
        favorites: []
      },
      clothing: [ // XS: 1
        {id: 1, name: "Light Blue Dress", price: 20, imgSrc: "/tops/1.jpg", size: 1},
        {id: 2, name: "Nude Dress with Blue Floral Design", price: 20, imgSrc: "/tops/4.jpg"},
        {id: 3, name: "White Dress with Gold Design", price: 15, imgSrc: "/tops/5.jpg"},
        {id: 4, name: "Brown Button Shirt", price: 15, imgSrc: "/tops/6.jpg", size: 1},
        {id: 5, name: "Yellow Dress", price: 27, imgSrc: "/tops/7.jpg"},
        {id: 6, name: "White Dress with Flower Design", price: 40, imgSrc: "/tops/8.jpg"},
        {id: 7, name: "White Blossom Mary shirt", price: 13, imgSrc: "/tops/9.jpg", size: 1},
        {id: 8, name: "White Dress with Black Design", price: 22, imgSrc: "/tops/3.jpg"},
        {id: 9, name: "White Floral Long Sleeve Dress", price: 27, imgSrc: "/tops/10.jpg"}
      ],
      displayed_clothing: [],
};

const appsReducer = (state = initialState, action) => {
  console.log('inside reducer');
  console.log(state.act);



  switch(action.type) {
    case 'ADD_CART':
      console.log('inside add case');

      console.log('Action:');
      console.log(action.payload);
      console.log('State:');
      console.log(state);
      console.log('Cart:');
      console.log(state.act.cart);

      return {
        ...state,
        act: {
          ...state.act,
          cart: state.act.cart.concat(action.payload)
        }
      };

    case 'DELETE_CART_ITEM':
      console.log('inside delete case');
      const delID = action.payload.id;

      return {
        ...state,
        act: {
          ...state.act,
          cart: state.act.cart.filter(state => state.id !== delID)
        }
      };

    case 'BUY_ITEMS':
      console.log('inside buy items case');
      console.log(action.payload);
      const emptyArray = [];

      // Otherwise, this is the one we want - return an updated value
      return {
        ...state,
        act: {
          ...state.act,
          history: state.act.history.concat(action.payload),
          cart: state.act.history.concat(emptyArray)
        }
      };

      case 'ADD_FAVORITE':
        console.log('inside add favorite case');

        console.log('Action:');
        console.log(action.payload);
        console.log('State:');
        console.log(state);

        return {
          ...state,
          act: {
            ...state.act,
            favorites: state.act.favorites.concat(action.payload)
          }
        };

        case 'DELETE_FAVORITE':
          console.log('inside delete case');
          const delFavID = action.payload.id;

          return {
            ...state,
            act: {
              ...state.act,
              favorites: state.act.favorites.filter(state => state.id !== delFavID)
            }
          };

          case 'FILTER_SIZE':
            console.log('inside filter size case');
            const sizeID = action.payload.id;
            let filtered_clothes = [];

            console.log('checked_status');
            console.log(action.payload.checked_status);

            // When checkbox is unchecked
            if (action.payload.checked_status === false){
              console.log('if statement')
               filtered_clothes = state.displayed_clothing.concat(filtered_clothes)
               console.log(filtered_clothes);
            } else {
              console.log('else statement');
              filtered_clothes = state.clothing.filter(item => item.size === sizeID);
            }

            console.log('filtered_clothes')
            console.log(filtered_clothes);


            return {
              ...state,
              displayed_clothing: filtered_clothes
            };




    default:
      return state;
  }
}

export const updateCartPrice = (state) => {
  let final_total = 0;

  state.apps.act.cart.map((cart_item) => {
      console.log('itemPrice');
      console.log(cart_item.price);

      final_total += cart_item.price;
      console.log('final_total')
      console.log(final_total)
      }
    )

  console.log('final_total in updateCartPrice')
  console.log(final_total)

  return final_total
}

export default appsReducer

action.js

import v4 from 'node-uuid';

// Add item to cart
export const addITEM = item => {

  return{
    type: 'ADD_CART',
    payload: {
      id: item.id,
      name: item.name,
      price: item.price,
      imgSrc: item.imgSrc
    }
  };
};

export const deleteCART_ITEM = item => {

  return{
    type: 'DELETE_CART_ITEM',
    payload: {
      id: item.id,

    }
  };
};

// let order_id = 1;

// Add items to history
export const purchaseITEMS = (items, date) => {

  return{
    type: 'BUY_ITEMS',
    payload: {
      id: v4(),
      items: items,
      date: date
    }
  };
};

// Add item to favorite
export const addFAVORITE = item => {

  return{
    type: 'ADD_FAVORITE',
    payload: {
      id: item.id,
      name: item.name,
      price: item.price,
      imgSrc: item.imgSrc
    }
  };
};

export const deleteFAVORITE = item => {

  return{
    type: 'DELETE_FAVORITE',
    payload: {
      id: item.id,

    }
  };
};

export const filterSIZE = (size, checked_status) => {
  return{
    type: 'FILTER_SIZE',
    payload: {
      id: size,
      checked_status: checked_status
    }
  };
};

如果您对我应该尝试什么有任何建议，我将不胜感激。我已经把头撞在墙上了，试图弄清楚这一点。

谢谢!

Answer 1

明白我做错了什么。我对 if-else 语句的处理方式太复杂了。基本上，摆脱了 else 状态并粘贴为 if 的代码。因此，在这种情况下，如果选中该框，那么我们就会显示过滤后的衣服。否则，我们将空数组(filtered_clothes 的初始值)分配给 displayed_clothes。

在我的 ItemGrid.js 中，有一个条件语句，基本上显示“displayed_clothes”数组(如果它有值)或常规服装数组。

  case 'FILTER_SIZE':
    console.log('inside filter size case');
    const sizeID = action.payload.id;
    let filtered_clothes = [];

    console.log('checked_status');
    console.log(action.payload.checked_status);

    // When checkbox is unchecked
    if (action.payload.checked_status === true){
       console.log('if statement')
       filtered_clothes = state.clothing.filter(item => item.size === sizeID);
       console.log(filtered_clothes);
     }

    console.log('filtered_clothes')
    console.log(filtered_clothes);


    return {
      ...state,
      displayed_clothing: filtered_clothes
    };