Выполнение кода React / Javascript не по порядку
Что касается моего предыдущего вопроса (код все еще вызывает у меня проблемы): Реагировать: назначение Javascript не обновляет объект
Код здесь https://codesandbox.io/s/github/nieroda/js_err
Вы можете увидеть объект, который у меня есть, в строке 2. Между 2 и 5 нет мутации, хотя вывод на печать отличается (как показано ниже), что заставляет меня поверить, что код выполняется не по порядку.
codeBreaker.js: 108
1. console.info("BEFORE")
2. console.info(gameBoardCopy[currentRow])
3. console.info("END")
let copy = this.state.gameBoard[currentRow].slice()
4. console.info("Copy Start")
5. console.info(copy)
6. console.info("Before Assignment")
copy[4] = { numColorMatch: 2, numExactMatch: 2 }
7. console.info("After Assignment")
8. console.info(copy)
9. console.info("copy end")
Глядя на результат
- ДО
2.
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}
- КОНЕЦ
- Копировать начало
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}копировать конец
Я не могу понять, что вызывает это, советы приветствуются. Спасибо
В моей функции onclick codeandbox.io/s/github/nieroda/js_err не стесняйтесь проверить код здесь codeBreaker.js:108
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Похоже, вы непреднамеренно изменяете состояние своего компонента. Вы не копируете объект здесь. Объекты Javascript передаются по ссылке, что означает, что когда вы напрямую назначаете такой объект другой переменной, они оба будут изменять одни и те же данные.
Вместо:
let copy = this.state.gameBoard[currentRow].slice()
вызов:
let copy = Object.assign({}, this.state.gameBoard[currentRow]);
Если вы намерены обновить состояние вашего компонента, вы должны вызвать the.setState({obj}).
Если вам нужно глубоко клонировать объект, я бы предложил функции глубокого копирования либо из лодаш, либо из подчеркивать (или создайте свои собственные: Объекты в JS: глубокая копия).
Надеюсь это поможет,
console.info на самом деле является асинхронным методом, и, скорее всего, именно поэтому вы видите, что выполнение «появляется» не по порядку. Всякий раз, когда вы console.info объект, обязательно console.info(JSON.stringify(JSON.parse(value)));.
Лучший способ увидеть порядок выполнения и его значения — добавить оператор debugger. Попробуйте добавить debugger; прямо над шагом 5 и просмотрите код, чтобы увидеть, каковы на самом деле значения. Я бы предположил, что значения будут такими, как вы ожидаете. Если нет, пошаговый процесс с помощью отладчика покажет вам, почему.
Вы регистрируете это в своем конструкторе? Если да, попробуйте войти
componentDidMount(). Сообщите мне результат. Это случилось со мной однажды раньше, хотя я еще не помню, что я сделал.