@NickACE
react redux

Почему .splice удаляет первый элемент и как пофиксить?

Есть такой стор с методом removePost который должен удалять элемент массива bikesData
const ADD_BIKE = 'ADD_BIKE'
const UPDATE_NAME_TEXT = 'UPDATE_NAME_TEXT'
const UPDATE_TYPE_TEXT = 'UPDATE_TYPE_TEXT'
const UPDATE_COLOR_TEXT = 'UPDATE_COLOR_TEXT'
const UPDATE_WHEEL_TEXT = 'UPDATE_WHEEL_TEXT'
const UPDATE_PRICE_TEXT = 'UPDATE_PRICE_TEXT'
const UPDATE_ID_TEXT = 'UPDATE_ID_TEXT'
const UPDATE_DESCRIPTION_TEXT = 'UPDATE_DESCRIPTION_TEXT'
const CLEAR_TEXT = 'CLEAR_TEXT'
const REMOVE_POST = 'REMOVE_POST'


let store = {
    _state: {
        nameText: '',
        typeText: '',
        colorText: '',
        priceText: '',
        wheelText: '',
        idText: '',
        descriptionText: '',
        bikesData: [
            {index: 1, name: 'name1', type: 'some type', color: 'some color', price: '205', wheel: '18', id: '1231241', description: 'some text'},
            {index: 2, name: 'name2', type: 'some type', color: 'some color', price: '206', wheel: '18', id: '1231242', description: 'some text'},
            {index: 3, name: 'name3', type: 'some type', color: 'some color', price: '207', wheel: '18', id: '1231243', description: 'some text'}

        ]
    },
    _checkSub() {
        console.log('check');
      },
    subscribe(lisentner) {
        this._checkSub = lisentner;
    },
    getState() {
        return this._state;
    },
    _addPost() {
        let newBike = {
          index: this._state.bikesData.length + 1 ,
          name: this._state.nameText,
          type: this._state.typeText,
          color: this._state.colorText,
          price: this._state.priceText,
          wheel: this._state.wheelText,
          id: this._state.idText,
          description: this._state.descriptionText,

        }
        this._state.bikesData.push(newBike);
        this._state.nameText = '';
        this._state.typeText = '';
        this._state.colorText = '';
        this._state.priceText = '';
        this._state.wheelText = '';
        this._state.idText = '';
        this._state.descriptionText = '';
        this._checkSub(this._state);
      }, 
    _clearField() {
        this._state.nameText = '';
        this._state.typeText = '';
        this._state.colorText = '';
        this._state.priceText = '';
        this._state.wheelText = '';
        this._state.idText = '';
        this._state.descriptionText = '';
        this._checkSub(this._state);
    },
    _removePost() {
      let index = this._state.bikesData.index
      this._state.bikesData.splice(index, 1)
      this._checkSub(this._state);
    },
      _updateBikeName(newText) {
        this._state.nameText = newText;
        this._checkSub(this._state);
      },
      _updateBikeType(newText) {
        this._state.typeText = newText;
        this._checkSub(this._state);
      },
      _updateBikeColor(newText) {
        this._state.colorText = newText;
        this._checkSub(this._state);
      },
      _updateBikeWheel(newText) {
        this._state.priceText = newText;
        this._checkSub(this._state);
      },
      _updateBikePrice(newText) {
        this._state.wheelText = newText;
        this._checkSub(this._state);
      },
      _updateBikeId(newText) {
        this._state.idText = newText;
        this._checkSub(this._state);
      },
      _updateBikeDescription(newText) {
        this._state.descriptionText = newText;
        this._checkSub(this._state);
      },
      dispatch(action) {
        if (action.type === ADD_BIKE) {
          this._addPost();
        } else if (action.type === CLEAR_TEXT) {
            this._clearField();
        } else if (action.type === UPDATE_NAME_TEXT) {
          this._updateBikeName(action.newText);
        } else if (action.type === UPDATE_TYPE_TEXT) {
            this._updateBikeType(action.newText);
        } else if (action.type === UPDATE_COLOR_TEXT) {
            this._updateBikeColor(action.newText);
        } else if (action.type === UPDATE_WHEEL_TEXT) {
            this._updateBikeWheel(action.newText);
        } else if (action.type === UPDATE_PRICE_TEXT) {
            this._updateBikePrice(action.newText);
        } else if (action.type === UPDATE_ID_TEXT) {
            this._updateBikeId(action.newText);
        } else if (action.type === UPDATE_DESCRIPTION_TEXT) {
            this._updateBikeDescription(action.newText);
        } else if (action.type === REMOVE_POST) {
          this._removePost();
      } 
    }
}


export const addBikeAction = () => {
    return {
      type: ADD_BIKE
    }
  }
  
export const updateNameAction = (text) => {
    return {
      type: UPDATE_NAME_TEXT,
      newText: text
    }
}

export const updateTypeAction = (text) => {
    return {
      type: UPDATE_TYPE_TEXT,
      newText: text
    }
}

export const updateColorAction = (text) => {
    return {
      type: UPDATE_COLOR_TEXT,
      newText: text
    }
}

export const updateWheelAction = (text) => {
    return {
      type: UPDATE_WHEEL_TEXT,
      newText: text
    }
}

export const updatePriceAction = (text) => {
    return {
      type: UPDATE_PRICE_TEXT,
      newText: text
    }
}

export const updateIdAction = (text) => {
    return {
      type: UPDATE_ID_TEXT,
      newText: text
    }
}

export const updateDescriptionAction = (text) => {
    return {
      type: UPDATE_DESCRIPTION_TEXT,
      newText: text
    }
}

export const clearAction = () => {
    return {
      type: CLEAR_TEXT
    }
}

export const removeAction = () => {
  return {
    type: REMOVE_POST
  }
}


    

window.store = store;
export default store;

И компонент который мапится по этому массиву
const Bike = (props) => {

let removePost = () => {
  props.dispatch(removeAction());
}



let bikesData = props.bikesData
.map( bike => <div  className={styl.card} >{bike.name} - {bike.type}({bike.color})
<button className={styl.but} onClick={ removePost }>X</button>
<br/>
<p>ID: {bike.id}</p>
<br/>
<p>STATUS: <button></button> </p>
</div> 
)

    return (
      <div>
        { bikesData } 


      </div>
    );
  }
  
export default Bike;


При нажатии на крестик всегда удаляется нулевой элемент массива.
Как это пофиксить и почему так происходит?
Заранее спасибо за ответ
  • Вопрос задан
  • 145 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы