Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Non-declarative state update #1

Open
welf opened this issue Jan 4, 2019 · 3 comments
Open

Non-declarative state update #1

welf opened this issue Jan 4, 2019 · 3 comments

Comments

@welf
Copy link

welf commented Jan 4, 2019

Здесь вы почему-то отказываетесь от декларативного подхода в пользу императивного:

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));
  };
@JadaWilf
Copy link

Add me on the Telegram ASAP!
@JadaWilf

@Kobdik
Copy link

Kobdik commented Jan 28, 2019

У 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);

@Manimall
Copy link

Manimall commented Aug 3, 2019

@welf - метод filter - как по мне, лучший способ удалить что-то из массива
именно про него говорится в в лучших туториалах и книгах....
но автор показал нам другой способ, - сказав, что мы сами можем написать код чуть лучше (или чуть хуже)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants