N
N
Nikolaj Alyabiev2021-08-01 12:25:04
React
Nikolaj Alyabiev, 2021-08-01 12:25:04

Why does .splice remove the first element and how to fix it?

There is such a store with a removePost method that should remove an element of the bikesData array

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;

And the component that maps to this array
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;


When you click on the cross, the zero element of the array is always deleted.
How to fix this and why is this happening?
Thanks in advance for your reply

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question