Может ли кто-нибудь помочь мне понять, что происходит в этом фрагменте кода - PullRequest
Новая
       81

Может ли кто-нибудь помочь мне понять, что происходит в этом фрагменте кода

0 голосов
/ 14 июля 2020

Я не могу следовать методу установки состояния в этом фрагменте кода. 

    locked: Array(5).fill(false), ///<<<  THIS IS THE INITIAL STATE

     this.setState(st => ({   //<<<<<  SETTING THE STATE ON BUTTON CLICK
      locked: [
        ...st.locked.slice(0, idx),
        !st.locked[idx], // << Iam not able to follow this line and the line after it.
        ...st.locked.slice(idx + 1)
      ]

Ответы [ 5 ]

1 голос
/ 14 июля 2020 
//locked is a state property with an array value of 5 false booleans
locked: Array(5).fill(false)

//passing current state through a function
this.setState(st => ({ 
  //selecting locked property of state to update
  locked: [
    //making a copy of all indexes up to the index that is to be updated
    ...st.locked.slice(0, idx),
    //toggling the selected index to have a value of true (if previously false)
    !st.locked[idx], 
    //making a copy of all indexes after the index that is to be updated
    ...st.locked.slice(idx + 1)
    ]
}))
1 голос
/ 14 июля 2020

locked - это массив логических значений. Этот код использует синтаксис распространения для создания нового массива логических значений из текущего, но с одним инвертированным элементом idx. Подробная разбивка: 

this.setState(st => ({              // callback version of setState that receives the current state as the argument
    locked: [                       // set a new array for `locked` that consists of :
        ...st.locked.slice(0, idx), // every element before the element at idx
        !st.locked[idx],            // the element at idx but inverted
        ...st.locked.slice(idx + 1) // every element after idx
    ]

Вы также можете создать копию исходного массива и инвертировать элемент в idx после этого: 

this.setState(st => {
    const locked = Array.from(st.locked);
    locked[idx] = !locked[idx];
    return {locked};
});

Или вы можете сопоставить массив: 

this.setState(st => ({
    locked: st.locked.map((item, i) => i === idx ? !item : item)
}));

Все это решает проблему инвертирования элемента в idx при создании нового массива (состояние реакции не должно изменяться).

1 голос
/ 14 июля 2020

Он просто инвертирует элемент в позиции idx.

Как это делается ??

Сначала он копирует все элементы до idx из locked и вставляет его обратно внутрь locked со строкой ниже. 

this.setState(st => ({ 
   locked: [ ...st.locked.slice(0, idx)]
}));

И затем он отменяет элемент в позиции idx. 

!st.locked[idx]

И затем копирует остальные элементы обратно в массив. 

...st.locked.slice(idx + 1)
0 голосов
/ 14 июля 2020

Здравствуйте, я пробовал это на этом фрагменте кода, и теперь мне все ясно. 

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    console.log(animals.slice(0, 2));
    console.log(animals[2] = "New Item Bro")
    console.log(animals.slice(2  + 1));
    console.log(animals)
0 голосов
/ 14 июля 2020

Это не имеет полного смысла без понимания того, откуда берется idx. Но он берет все в массиве st.locked и оставляет его без изменений, за исключением idx, который он инвертирует.

Затем он возвращает новый массив с теми элементами, которые должны были сделаны намеренно. В противном случае было бы гораздо проще нацелить st.locked [idx]. Автор этого кода по какой-то причине возвращает новый массив , и это, вероятно, важно.

...