Non-declarative state update
welf opened this issue · 3 comments
welf commented
Здесь вы почему-то отказываетесь от декларативного подхода в пользу императивного:
onDelete = (id) => {
this.setState((state) => {
const idx = state.items.findIndex((item) => item.id === id);
const items = [
...state.items.slice(0, idx),
...state.items.slice(idx + 1)
];
return { items };
});
};
Почему бы этот код не написать вот так, в одну строчку?
deleteItem = id => {
this.setState(({ todoData }) => ({todoData: todoData.filter(el => el.id !== id)}));
};
Функция filter возвращает новый массив, поэтому изначальный массив не изменяется.
То же самое и в этом коде:
toggleProperty = (arr, id, propName) => {
const idx = arr.findIndex((item) => item.id === id);
const oldItem = arr[idx];
const value = !oldItem[propName];
const item = { ...arr[idx], [propName]: value } ;
return [
...arr.slice(0, idx),
item,
...arr.slice(idx + 1)
];
};
Вместо того, чтобы мучаться с нахождением индекса нужного элемента, а затем со сборкой/разборкой массива, лучше всё сделать при помощи одного прохода по массиву с использованием map:
toggleProperty = (arr, id, propName) => {
// определяем вспомогательную функцию
const inverseProp = (item, id, propName) => {
item.id === id ? return { ...item, [propName]: !item[propName] : return item
};
// и при помощи map возвращаем новый массив
return arr.map(el => inverseProp(el, el.id, propName));
};
Kobdik commented
У JadaWilf синтаксическая ошибка в выражении
item.id === id ? return { ...item, [propName]: !item[propName] : return item
//можно сократить в одну строку:
let toggleProperty = (arr, id, propName) => arr.map(el => el.id === id ? { ...el, [propName]: !el[propName] } : el);