Bug删除数组上的el

Question

我的函数不断删除数组的最后一个元素，尽管我添加了按索引检查

DelCategory它是弹出窗口，useState del负责呈现弹出

当点击DelCategory onClick＝｛delCatC｝时，所选类别被删除

提前感谢

BlockListAdmin

function BlockListAdmin() {
const category = useSelector(state => state.newcat.category); // * Take category from redux store
console.log(category)
const dispatch = useDispatch()

const DelCategoryC = (id) => {
dispatch(delCat(id))
}

const [del, setDel] = useState(false);
const delCatT = () => {
setDel(!del)
}
return (
<>
<div className='container'>
{category.map((objectCategory) => {
return (
<div className={style.blockList} key={Math.random().toString()} style={{ borderTop: `3px solid ${objectCategory.color}` }}>
<div className={style.blockListHead}>
<h4 className={style.blockTitle}>
{objectCategory.name}
</h4>
<button className={style.btnDown}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6 9L12 15L18 9" stroke="white" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button className={style.btnUp}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6 15L12 9L18 15" stroke="white" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
{/* тут было */}
<button className={style.btnClose} onClick={delCatT}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M6 6L18 18" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
</div>
{/* {
objectCategory.list.lenght ? <ul className={style.list}>
{objectCategory.list.map((item) => {
return <BlockItemAdmin title={item.title} about={item.about} img={item.imgLink}
url={item.url} key={Math.random().toString()}/>;//? replace key;
})}
</ul> : <NewCategory/>
}  */}
<ul className={style.list}>
{objectCategory.list.map((item) => {
return <BlockItemAdmin title={item.title} about={item.about} img={item.imgLink}
url={item.url} key={Math.random().toString()} />;//? replace key;
})}
</ul>
{del ?
<DelCategory id={objectCategory.id} setActiveWindow={setDel} /> : null}
</div>
)
})}
</div>
</>
)
}
export default BlockListAdmin;

DelCategory

function DelCategory({id, setActiveWindow}) {

const dispatch = useDispatch()
const delCatC = (e) => {
e.preventDefault()
setActiveWindow(false)
dispatch(delCat(id))
}
return (
<div className={style.form}>
<form className={style.AddBookmark}>
<div className={style.formTitle}>
Удаление категории
</div>
<p className={style.text}>Вы уверенны, что хотите удалить эту категорию?
Все закладки из этой категории также будут удалены</p>
<div className={style.btnGroup}>
<button className={style.addBtn} type="submit" onClick={delCatC}>Уалить категорию</button>
<button className={style.cancelBtn}>Отмена</button>
</div>
<button className={style.formBtnClose}>
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4L4 12" stroke="#696969" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M4 4L12 12" stroke="#696969" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</form>
</div>
)
}
export default DelCategory;

动作

export const delCat = (id) => ({
type: 'DEL_CATEGORY',
payload: { id },
})

减速器

const initialState = {
category: [
{
id: 1,
name: "Изброное",
color: "#5236C1",
list: [
{
title: "Яндекс.Почта",
about: "Сервис с бесплатными иконками на любой вкус и цвет и есть немного платных. Но норм.",
imgLink: 'https://www.google.com/s2/favicons?domain=https://mail.yandex.ru/',
url: 'https://www.yandex.ru'
},
]
},
]
};
const delCat = (state, payload) => {
const { id } = payload
const idx = state.category.findIndex((el) => el.id === id)
let pastState = state.category.slice(0, idx)
let futureState = state.category.slice(idx + 1)
let newState = [...pastState, ...futureState]
return {
...state,
category: newState,
}
}
const newcat = (state = initialState, action) => {
switch (action.type) {
case 'DEL_CATEGORY':
return delCat(state, action.payload)
default:
return state;
}
};
export default newcat;

我的朋友们，更少的bug适合你

Answer 1

问题是在渲染时，id被最后一个元素的id覆盖。因此，id被分配了最后一个元素的编号。为了避免这种情况，作为一种选择，您应该创建一个useState并将特定元素的id放入其中

更新

BlockListAdmin

//create state
const [id, setId] = useState(null);
//create func
const takeId = (id) => {
setId(id)
setDel(!del)
}
<button className={style.btnClose} onClick={() => takeId(objectCategory.id)}>
{del ?<DelCategory  setActiveWindow={setDel} elDelId={id}/> : null}

DelCategory

const delCatC = (e) => {
e.preventDefault()
setActiveWindow(false)
dispatch(delCat(elDelId))
}