Невозможно изменить второе значение массива в состоянии с условным оператором в редукторе --- Redux - PullRequest
Новая
       0

Невозможно изменить второе значение массива в состоянии с условным оператором в редукторе --- Redux

0 голосов
/ 10 января 2020

Я застрял на данный момент. Я пытаюсь передать логическое значение в действие, которое затем будет использовать регистр (FILTER_SIZE) внутри редуктора, который либо устанавливает значение в массиве display_clothing для элементов с тем же sizeID, либо очищает массив display_clothing, что приводит к возврату моей страницы Item вернуться к отображению предметов одежды из массива одежды в пределах указанного, а не отфильтрованных предметов в display_clothing.

Кажется, что Filter_clothes не меняет своего значения после оператора if-else на основе имеющихся у меня console.logs , Примечание. Я сделал в фильтре значение Filter_clothes, но во время оператора if-else получил недопустимую ошибку присваивания, поэтому вместо него использовал let. (Если честно, я не уверен, почему это не сработало, поскольку я сделал что-то подобное в случае ПОКУПКИ, используя вместо этого 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 (файл редуктора) 

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
    }
  };
};

Если у вас есть какие-либо предложения по поводу того, что я должен попробовать, буду признателен. Я бьюсь головой о стену, пытаясь понять это.

Спасибо!

1 Ответ

2 голосов
/ 14 января 2020

Разобрался, что я сделал не так. Я слишком запутался в том, что касается заявления «если-либо». По сути, избавился от состояния else и вставил как код для if. Так что в этом случае, если флажок установлен, мы показываем отфильтрованные одежды. В противном случае мы присваиваем пустой массив (начальное значение Filter_clothes) на display_clothes.

В моем ItemGrid. js, есть условный оператор, который в основном отображает массив 'display_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
    };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...