Question

我是React的新手，现在我正在开发一个用户应该能够选择基本成分的项目，并将其添加到数组中。通过单击另一个基本成分，第一个应从阵列中删除。现在，所选择的成分仅在单击同一个时才会删除。

我希望在点击另一个时删除它。请帮助：）

import React from 'react';
import Actions from '../../../actions/actions';
import BaseIngredientButton from './BaseIngredientButton';

class BaseIngredientItem extends React.Component {
    _OnClick (props) {

        if (this.props.isChosen) {
            Actions.removeItem(this.props.baseIngredient);
        } else {
            Actions.addItem(this.props.baseIngredient)
            Actions.setBaseIngredient( this.props.baseIngredient );
        }

        console.log(this.props.isChosen)

    }

    render () {
       return (
           <BaseIngredientButton isChosen={this.props.isChosen} onClick={ this._OnClick.bind(this)} txt={ this.props.baseIngredient.name } />
       )
    }
}

BaseIngredientItem.propTypes = { 
    baseIngredient: React.PropTypes.object.isRequired,
    isChosen: React.PropTypes.bool
}

export default BaseIngredientItem;

这是我的store.js

let _cart = [];

const _removeItem = ( item ) => {
  _cart.splice( _cart.findIndex( i => i === item ), 1 );
  console.log("Ingredients in cart after removal", _cart);
};

const _getItemInCart = ( item ) => {
  return _cart.find( ingredient => ingredient.name === item.name )
};

const _addItem = ( item ) => {
  if (!_getItemInCart( item )) {
    _cart.push(item);
  } 
  console.log("Ingredients in cart after addition", _cart);
};

let _currentBaseIngredient = {};

const _setCurrentBaseIngredient = ( baseIngredient ) => {
  _currentBaseIngredient = baseIngredient
};

这是我的action.js

 addItem( item ){
    dispatch({
       actionType: AppConstants.ADD_ITEM, 
       item
     })
  },
  removeItem( item ){
    dispatch({
      actionType: AppConstants.REMOVE_ITEM, 
      item
    })
  },
  setBaseIngredient( baseIngredient ){
    dispatch({
      actionType: AppConstants.SET_BASE_INGREDIENT, 
      baseIngredient
    })
  },

Answer 1

您的BaseIngredientItem组件不知道阵列中是否有其他基本成分，正如我在评论中提到的，这肯定是在商店级别检查的东西。

有没有办法确定某个项目是否为base类型？如果有，您可以在addItem功能中检查其是否存在：

（请不要介意一些伪代码）

const _addItem = ( item ) => {
  if (item is a base ingredient)
    removeCurrentBaseIngredient()

  if (!_getItemInCart( item )) {
      _cart.push(item);
  } 
  console.log("Ingredients in cart after addition", _cart);
};

const removeCurrentBaseIngredient = () => {
  _removeItem( _currentBaseIngredient );
};

由于商店已经知道_currentBaseIngredient，您应该可以轻松查找，并致电_removeItem将其从_cart中删除。

我希望有所帮助！

通过更改道具来反应es6，从数组中删除项目

1 个答案: