Блог

Главная - Вопросы по программированию - Вставьте объект в массив с определенным индексом в React

Вставьте объект в массив с определенным индексом в React

#javascript #arrays #reactjs #react-hooks #use-state

Вопрос:

Я пытаюсь добавить объект в определенную точку в моем массиве «данные», который находится в этом состоянии компонентов. Следующее не работает, массив просто опустошается.

 addNewBulletAfterActive = () => {
    const array = this.state.data;
    const newBulletPoint = {
        id: this.state.data.length  = 1,
        title: 'Click to add'
    };
    const newData = array.splice(this.state.activeBulletPointId, 0, newBulletPoint);
    this.setState({
        data: newData
    });
}

Идея заключается в том, что если у меня есть список из 10 пунктов, пользователь может нажать на 4-й пункт и нажать enter, чтобы добавить новый пункт сразу после этого. У меня не было никаких проблем с добавлением элементов в конец массива, но похоже, что .splice вызывает проблемы.

Ответ №1:

Я считаю, что это должно сделать то, что вам нужно.

 function addAfter(array, index, newItem) {
    return [
        ...array.slice(0, index),
        newItem,
        ...array.slice(index)
    ];
}

Эта функция возвращает новый массив с новым элементом, вставленным в середину. Он не изменяет ваш исходный массив и поэтому будет хорошо работать с состоянием компонента и его исправлением.

Затем вы можете назначить выходные данные этой функции своему состоянию.

Комментарии:

1. Я думаю, что этот ответ должен быть принят

Ответ №2:

splice возвращает сращенные элементы (которые пусты, так как вы сращиваете 0 элементов) и изменяет исходный массив.

 const newData = array.slice(0); // copy

newData.splice(this.state.activeBulletPointId, 0, newBulletPoint);

this.setState({
    data: newData
});

Комментарии:

1. splice изменит состояние, что, как правило, является плохой практикой

2. @Валентин, я добавил срез перед сращиванием 🙂

3. Пока это единственный ответ, который на самом деле объясняет, почему код операции не сработал.

4. Это именно то, чего я добивался. Спасибо @YuryTarabanko

Ответ №3:

Я думаю, что это может быть более простым и быстрым способом сделать это

 /*Just plain JS*/
function AddAfter(array, newObject){
    array.unshift(newObject);
  }
  
/*In react If updating state*/
var _prev = this.state.your_array; //getting the current value for the state object
var newInfo = {id: 1, more: 'This is a new object'};
_prev.unshift(newInfo);
Метки: