Реакция / выполнение Javascript из кода заказа

Question

Что касается моего предыдущего вопроса (код все еще доставляет мне проблемы): Реагирует: назначение Javascript не обновляет объект

Код здесь https://codesandbox.io/s/github/nieroda/js_err

Вы можетепосмотрите на объект, который у меня есть, в строке 2. Между 2 и 5 нет никакой мутации, хотя вывод на печать отличается (как показано ниже), что наводит меня на мысль, что код выполняется не по порядку.

codeBreaker.js: 108

    1. console.log("BEFORE")
    2. console.log(gameBoardCopy[currentRow])
    3. console.log("END")

    let copy = this.state.gameBoard[currentRow].slice()

    4. console.log("Copy Start")
    5. console.log(copy)

    6. console.log("Before Assignment")
    copy[4] = { numColorMatch: 2, numExactMatch: 2 }
    7. console.log("After Assignment")

    8. console.log(copy)
    9. console.log("copy end")

Глядя на вывод

1. ДО

2.

0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

END Начало копирования

5.

    0: "BlueViolet"
    1: "BlueViolet"
    2: "BlueViolet"
    3: "BlueViolet"
    4: {numColorMatch: 2, numExactMatch: 2}

Перед назначением После Назначения

 0: "BlueViolet"
 1: "BlueViolet"
 2: "BlueViolet"
 3: "BlueViolet"
 4: {numColorMatch: 2, numExactMatch: 2} 

Копировать конец

Я не могу понять, чтовызывает это, советы приветствуются.Спасибо

Answer 1

console.log на самом деле является асинхронным методом, и, скорее всего, именно поэтому вы видите, что выполнение «появляется» не по порядку.Всякий раз, когда вы console.log объект, убедитесь, что console.log(JSON.stringify(JSON.parse(value)));.

Лучший способ увидеть порядок выполнения и его значения - добавить оператор debugger.Попробуйте добавить debugger; прямо над шагом 5 и пройтись по коду, чтобы увидеть, какие значения на самом деле.Я полагаю, что значения будут такими, как вы ожидаете.Если нет, то пошаговое выполнение процесса с использованием отладчика покажет вам, почему.

Answer 2

Похоже, что вы непреднамеренно изменяете состояние вашего компонента.Вы не копируете объект здесь.Объекты Javascript передаются по ссылке, что означает, что когда вы непосредственно назначаете объект, подобный этому, другой переменной, они оба изменят одни и те же данные.

Вместо:

let copy = this.state.gameBoard[currentRow].slice()

call:

let copy = Object.assign({}, this.state.gameBoard[currentRow]);

Если вы хотите обновить состояние вашего компонента, вам следует позвонить the.setState({obj}).

Если вам нужно глубоко клонировать объект, я бы предложил функции глубокого копирования из lodash или подчеркивание (или создайте свой собственный: Объекты вJS: глубокая копия ).

Надеюсь, это поможет,