Почему state меняется сам по себе, хотя я ничего не присваиваю?

Question

[Артём]

В этом коде просто написано this.setState и я ничего не присваиваю внутри, однако state меняется. Что происходит?

changeHandler = (value, controlName, controls) => {
    const formControls = controls.slice();
    const control = formControls[controlName]

    control.touched = true
    control.value = value
    control.valid = validate(control.value, control.validation)

    formControls[controlName] = control  
    this.setState({       
    })
  }

Comments

[Роман Александрович]

первый раз вижу что бы вызывали this.setState({}) без параметров.

[Артём]

Роман Александрович, ну он у меня с параметрами, просто если их убрать, то все равно state меняется, при этом если удалить пустой setState, тогда перестает менятся. Я в шоке сижу))

[Роман Александрович]

Артём, так а смысл от вашего кода?
вы ничего не меняете в стейте но вызываете его изменение и по этому произойдет перерендер компонента. А покажите состояние стейта до и после рендера. Как вы поняли что он изменился?

[Артём]

Роман Александрович, данный кусок кода принимает value у инпута, а также частать стейта, которая должна принять значение из этого value, я сделал console.log(this.state). И при вводе данных в инпут я вижу, что в стейте этого инпута появилось value, значит стейт меняется.

this.setState({     
      formcontrols,
      isFormValid: validateForm()
    })

Вот какой код у стейта, по идее value в state-e должно меняться только с таким setState, однако оно меняется когда он пустой. В других местах нигде нет setState-ов, которые бы могли изменять value, поэтому я не понимаю

[Роман Александрович]

Артём, вы наверно где то мутируете стейт. закоментируйте setState и запустите приложение. Если ничего не изменится значит вы где то накосячили в коде. Ищите где вы присвоение делаете и меняется стейт.

[Роман Александрович]

Артём, и выложите весь код

[Артём]

Роман Александрович, я же говорю, если setState закомментировать, то state не меняется больше

[Роман Александрович]

Артём, закомментируйте все кроме setState

[Артём]

Роман Александрович,

changeHandler = (value, controlName, controls) => {
    const formControls = controls.slice();
    const control = formControls[controlName]

    control.touched = true
    control.value = value
    control.valid = validate(control.value, control.validation)

    formControls[controlName] = control  
    this.setState({     
      formcontrols,
      isFormValid: validateForm()
    })
  }

  renderControls(controls) { 
    return controls.map((control,index) => {     
      return(
        <Auxillary key={index}>
          <Input
          type={control.type}
          label={control.label}
          value={control.value}
          valid={control.valid}
          shouldValidate={!!control.validation}
          touched={control.touched}
          errorMessage={control.errorMessage}
           onChange={event => this.changeHandler(event.target.value, index, controls)}

        />
       </Auxillary>
      )
    })
     
    
  }


Это вызываю в render-e
{this.renderControls(this.state.enrollerControls)}

this.state.enrollerControls - это массив с объектами внутри, каждый объект отвечает за инпуты и имеет поле value.

[Роман Александрович]

Артём, https://codesandbox.io/ залейте ваш проект сюда.

[Артём]

Роман Александрович, https://codesandbox.io/s/github/DarkRide88/arm-bsuir

[Роман Александрович]

Артём, уважаемый то что вы залили работает. Засуньте в рендер console.log("this.state", this.state); и посмотрите что происходит. Мне выводит 2 лога. Первый при инициализации второй при изменении валидации и работает как и должно. Какой из ключей стейта меняется?

[Артём]

Роман Александрович, при изменении инпутов до надписи "Аттестат", внутри enrollerControls у соответствующего инпуту объекта меняется поле value. При изменении полей ниже слова "Аттестат" аналогичное происходит в subjectsControls.
Я вижу что у меня все меняется, но я не понимаю, каким образом меняется enrollerControls и subjectsControls, если я в функции changeHandler пишу это:
const formControls = controls.slice();
тем самым создавая копию либо enrollerControls, либо subjectsControls. После чего редактирую копию и в setState сохраняю новый объект. Как меняется enrollerControls и subjectsControls??

[Роман Александрович]

Артём,
тут вы достаете из стейта значение enrollerControls
{this.renderControls(this.state.enrollerControls)}

пототм вы рисуете и тут controls это ваши enrollerControls из стейта. По сути это адна и та же переменная стейта.

renderControls(controls) {
    return controls.map((control, index) => {
      return (
        <Auxillary key={index}>
          <Input
            type={control.type}
            label={control.label}
            value={control.value}
            valid={control.valid}
            shouldValidate={!!control.validation}
            touched={control.touched}
            errorMessage={control.errorMessage}
            onChange={event =>
              this.changeHandler(event.target.value, index, controls)
            }
          />
        </Auxillary>
      );
    });
  }

потом вы вызываете this.changeHandler(event.target.value, index, controls) где controls это ваши enrollerControls из стейта.

changeHandler = (value, controlName, controls) => {
    console.log("controls", controls);
    const formControls = controls.slice();
    console.log("controls", controls);
    const control = formControls[controlName];
 // А ВОТ ТУТ ВЫ МУТИРУТЕ СТЕЙТ ИЗМЕНЯЯ ЕГО ЗНАЧЕНИЕ НА ПРЯМУЮ БЕЗ ИСПОЛЬЗОВАНИЯ SET STATE
    control.touched = true;
    control.value = value;
    control.valid = validate(control.value, control.validation);
    console.log(formControls[0]);
    formControls[controlName] = control;
    this.setState({
      isFormValid: validateForm()
    });
  };

// А ВОТ ТУТ ВЫ МУТИРУТЕ СТЕЙТ ИЗМЕНЯЯ ЕГО ЗНАЧЕНИЕ НА ПРЯМУЮ БЕЗ ИСПОЛЬЗОВАНИЯ SET STATE
control.touched = true;
control.value = value;
control.valid = validate(control.value, control.validation);

[Артём]

Роман Александрович, так если сравнить

const formControls = controls.slice();
console.log(controls == formcontrols)

выдаст false, из-за того, что объект скопирован slice-oм,
а если присвоить без .slice(), тогда показывает true, т.е. что это один и тот же объект.
Почему я мутирую стейт, если я изменяю его копию?

[Роман Александрович]

Артём, попробуйте https://www.samanthaming.com/tidbits/35-es6-way-to...

[Артём]

Роман Александрович, все равно получается, что мутирует state

[Yustas Alexu]

Артём,

Почему я мутирую стейт, если я изменяю его копию?

slice делает копию массива, а вы мутируете объекты в массиве, которые передаются по ссылке прямо из стейта. Советую использовать какую-нибудь библиотеку типа icepick или хотя бы immer, чтобы избежать случайной мутации стейта.

[Yustas Alexu]

Артём, Еще как вариант можно использовать cloneDeep из lodash вместо slice, тогда массив скопируется полностью, вместе с объектами внутри. Но cloneDeep работает медленно, насколько мне известно, используйте в крайних случаях или как быстрый фикс.

[Артём]

Yustas Alexu, спасибо