Ребят, подскажите как в такой задаче лучше поступить, есть массив

Question

Ребят, подскажите как в такой задаче лучше поступить, есть массив

объектов, где каждый объект это слово, которое рендерится и отображается, нужно добавить возможность добавлять новые слова после конкретного элемента.
Я добавил функцию при клике на слово, выбранный объект добавляется в стейт (что бы понять какой сейчас активный)

При попытке добавить новое слово, в метод приходит новый объект (который нужно добавить в след за активным). Нужно найти активный объект в массиве, узнать его индекс и после чего добавить за ним новый объект.
Один из вариантов, это сделать через array.splice(index + 1, 0, {newObj}
И потом этот массив снова записать в стейт.
Но splice мутирует мой массив, есть ли ещё какие то варианты?

#frontend #javascript #programming #react.js #russian

0

07.11.2020

14 ответов

16 просмотров

Юрий Автор вопроса

Dmitry Croft
[...array, item]

И как ты с помощью спреда запишешь новый объект в нужное место?

0

07.11.2020

Dmitry Croft

Юрий
И как ты с помощью спреда запишешь новый объект в ...

а, тебе не в конец. Тогда можешь через map либо reduce

0

07.11.2020

Dmitriy Shuleshov

Верная идея со сплайсом, но вначале скопируй исходный массив

0

07.11.2020

Dmitry Croft

Dmitriy Shuleshov
Верная идея со сплайсом, но вначале скопируй исход...

либо так

0

07.11.2020

Юрий Автор вопроса

Dmitry Croft
а, тебе не в конец. Тогда можешь через map либо re...

Ну я сделал, const new = array.slice() для копии Потом const index = new.map(x => x.Id).indexOf(activeObj.Id) Это возвращает индекс. Потом new.splice(index + 1, 0, {newObj} Потом мой new пытаюсь записать в стейт

0

07.11.2020

Юрий Автор вопроса

Dmitriy Shuleshov
Верная идея со сплайсом, но вначале скопируй исход...

Через slice() или просто [...old]

0

07.11.2020

Dmitriy Shuleshov

Юрий
Через slice() или просто [...old]

Без разницы, вот выше укзали верный вариант

0

07.11.2020

Юрий Автор вопроса

Dmitriy Shuleshov
Без разницы, вот выше укзали верный вариант

И активное слово получается нужно обнулять, так как его индекс уже другой?

0

07.11.2020

Dmitriy Shuleshov

Юрий
И активное слово получается нужно обнулять, так ка...

Сетай в стейт не слово а активный индекс сразу

0

07.11.2020

Юрий Автор вопроса

Dmitriy Shuleshov
Сетай в стейт не слово а активный индекс сразу

я сетаю целый обьект, в котором и слово и его ID. а по поводу индекса, а какая разница, искать индекс и сетать его на моменте клика на слово или на моменте добавить что-то после слова?

0

07.11.2020

Dmitriy Shuleshov

Юрий
я сетаю целый обьект, в котором и слово и его ID. ...

Индекс можно сразу прокинуть в замыкании из мапа

0

07.11.2020

Юрий Автор вопроса

Dmitriy Shuleshov
Индекс можно сразу прокинуть в замыкании из мапа

подскажи пожалуйста, а с чем может быть связано то, что индекс внутри метода который добавляет старый, а не новый? у меня получается делиться на родителя и ребенка логика. внутри ребенка они мапяться и есть метод который слушает нажание на кнопку и если нажали вызывает колбэк родителя и передает обьект (что за кнопка и тд) в родителе внутри метода, я проверяю ActiveIndex который находится внутри стейта и делаю уже, то, что писал ранее: if (activeIndex >= 0) { const newEquation = [...equation].splice(activeIndex + 1, 0, keyEvent); setEquation(newEquation); setActiveIndex(null); } а метод который сетит активное находится у каждого слова, при мапе внутри компонента ребенка, onClick={() => setActiveIndex(index)} почему когда я выбираю первый раз слово, индекс сетиться, добавляется в массив и все окей, а при выборе следующего слова, индекс старый и добавляется не в то место?

0

07.11.2020

Dmitriy Shuleshov

Юрий
подскажи пожалуйста, а с чем может быть связано то...

Так сложно, нужен сендбокс

0

07.11.2020

Dmitry Croft · Accepted Answer

Dmitry Croft

[...array, item]

0

07.11.2020

169 похожих чатов

Ребят, подскажите как в такой задаче лучше поступить, есть массив

14 ответов

Похожие вопросы