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

Question

[Nikolaj Alyabiev]

Есть такой стор с методом 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;

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

Comments

[WbICHA]

Потому что arr.splice(undefined, 1) удаляет нулевой элемент.
И ещё у кое-кого индексация с 1 начинается.

[Nikolaj Alyabiev]

менял индексацию на 0 ничего не происходило

[Nikolaj Alyabiev]

WbICHA, точнее не менялось, по прежнему удалялся нулевой элемент

[WbICHA]

Nikolaj Alyabiev, хорошо, спустимся на уровень ниже.
Какой тип у this._state.bikesData и чему равен this._state.bikesData.index?

[Nikolaj Alyabiev]

this._state.bikesData массив
this._state.bikesData.index undefined потому что не указана позиция в массиве
в том и вопрос как привязать кнопку для указания позиции?

[Сергей Сергей]

привязать через параметр нельзя, типа
.map( ... onClick = removePost( i ) ... )

[Nikolaj Alyabiev]

Можно привязать через document.query но я не хочу обращатся к дому

[Сергей Сергей]

Зачем документ дёргать? в map не передаётся индекс элемента? индекс нельзя внедрить в метод как параметр?

[Nikolaj Alyabiev]

Сергей Сергей, изменил но опять удаляет нулевой элемент
стор

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: 0, name: 'name1', type: 'some type', color: 'some color', price: '205', wheel: '18', id: '1231241', description: 'some text'},
            {index: 1, name: 'name2', type: 'some type', color: 'some color', price: '206', wheel: '18', id: '1231242', description: 'some text'},
            {index: 2, 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 ,
          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(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(action.index);
      } 
    }
}


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 = (itemIndex) => {
  return {
    type: REMOVE_POST,
    index: itemIndex
  }
}


    

window.store = store;
export default store;

компонент

import './../../../App.css'
import styl from './Bike.module.css'
import { removeAction } from './../../../Redux/Store'

const Bike = (props) => {

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



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;

[Сергей Сергей]

не вижу такой строки
props.bikesData.index = /*хоть что-нибудь*/

[Nikolaj Alyabiev]

Сергей Сергей, сыпет ошибку Cannot read property 'props' of undefined
что то типо такого?
let index = props.bikesData.index
.map( ...onClick = removePost( i ))?

[Сергей Сергей]

let index = props.bikesData.index
здесь чтение неизвестного значения из bikesData.index. Где запись в bikesData.index? Зачем вообще bikesData.index нужен?

Откуда идёт чтение props? Зачем туда передаётся что-то неизвестное?

Вообще есть понимание, откуда брать i в записи removePost( i )? Сам метод может воспринять правильно это i?

Эти вопросы нужны, чтобы распутать мешанину деталей в замысле. Без этого осознанно работать с массивами невозможно, только наугад.

[Nikolaj Alyabiev]

Сергей Сергей, bikesData.index неизвестно потому что не указан элемент массива, bikesData.index нужен как идентификатор того какой элемент удалить, пропсы прокидуются через параметры из стора

[Сергей Сергей]

Пусть bikesData.index нужен, а как узнать элемент массива? Здесь есть перебор этого массива, там эти элементы, очевидно (очевидно?), доступны.
И пропсы что-то плохо проксируются, если undefined.

[Nikolaj Alyabiev]

Сергей Сергей, плохо проксируются потому что написано не в методе .map без указания ячейки массива, если я дописываю как параметр в X функция начинает вызыватся сама собой и удаляет первый пост при каждом рендере

[Сергей Сергей]

Значит надо переделать так, чтобы функция не вызывалась, но параметр был привязан к ней для запуска в нужный момент. Есть такой метод у функций "bind", можно почитать. Странно, что в Реакте не предусмотрен удобный способ для всего этого, или я просто не знаю.

[Nikolaj Alyabiev]

Сергей Сергей, вышел такой код, привязал к индексу элемента, но похоже не правильно, как правильно это сделать?

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

[Сергей Сергей]

ещё раз прочитать про bind, там нужен дополнительный аргумент.

[Nikolaj Alyabiev]

Сергей Сергей, То есть первый аргумент правильный?

[Сергей Сергей]

нет.
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Nikolaj Alyabiev]

Сергей Сергей, можете пожалуйста написать Ваш вариант, я пробовал разные аргументы ничего не менялось, пытался привязать к массиву, но находясь в .map все равно выдавало undefined

[Сергей Сергей]

removePost.bind( null, bike.index )

не понял, внутри map переменная bike не отдаёт свойства?

[Nikolaj Alyabiev]

Сергей Сергей, этот вариант тоже не подошел

[Nikolaj Alyabiev]

Сергей Сергей, отдаёт

[Nikolaj Alyabiev]

Сергей Сергей, ошибки не падают но по прежднему удаляется первый элемент с вашим вариантом

[Сергей Сергей]

Сейчас будем дебажить код.

removePost.bind( 'DEBUG', bike.index )


_removePost( index ) {
   console.log( 'непосредственно splice', this, index )
   this._state.bikesData.splice(index, 1)
   this._checkSub(this._state);
 },


let removePost = ( index ) => {
  console.log( 'какая-то прослойка', this, index );
  props.dispatch( removeAction( index ) );
}

spoiler

слишком много кодоблудия в вашем Реакте.

[Nikolaj Alyabiev]

Сергей Сергей, какая-то прослойка undefined 1

[Сергей Сергей]

и больше ничего? как тогда удаляет _removePost?

[Nikolaj Alyabiev]

https://drive.google.com/file/d/1_EF9C9fv6sjo8Zy0h...
закинул архив с проектом