score:1
looks like you are unintentionally mutating the state of your component. you are not copying the object here. javascript objects are passed by reference, which means when you directly assign an object like this to another variable, they both will modify the same data.
instead of:
let copy = this.state.gameboard[currentrow].slice()
call:
let copy = object.assign({}, this.state.gameboard[currentrow]);
if it is your intention to update the state of your component you should call the.setstate({obj})
.
if you have to deep clone an object, i would suggest deep copy functions from either lodash or underscore (or create your own: objects in js: deep copy).
hope this helps,
score:3
console.log
is actually an async method and that is most likely why you are seeing the execution "appear" out of order. whenever you console.log
an object, make sure to console.log(json.stringify(json.parse(value)));
.
a better way to see execution order and its values is to add debugger
statement. try adding debugger;
right above step 5 and walk through the code to see what the values actually are. i would imagine the values would be as you expect them to be. if not, stepping through the process using the debugger will tell you why.
Source: stackoverflow.com
Related Query
- React / Javascript Out Of Order Code Execution
- What's useEffect execution order and its internal clean-up logic in react hooks?
- What is the correct order of execution of useEffect in React parent and child components?
- Dockerizing React in production mode: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
- why vscode is not recognizing react code as react javascript instead it format it as vanilla javascript
- Event propagation with React bubbling out of order
- JavaScript heap out of memory while build react app in docker container
- How to load a react component written in JSX code from my Javascript code
- why is React source code written in JavaScript instead of TypeScript, but still have types?
- Converting JavaScript code to react component class format
- React Js - Typescript 4.2.3 JavaScript heap out of memory
- React doesn't have the same execution order when calling a component as a function rather than using it as a tag?
- Need to pass the execution of code to get output in Javascript
- How to write JavaScript code inside html attributes in React JS
- npm run build on my react app gives error => (Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out out of memory)
- How to rewrite code in order for the code to be dry in react
- React Warning.js - How to figure out where in the code the error is originating from?
- Converting a javascript map code to React
- Add JavaScript code in React component and calling it
- Strange double execution of setState code in react
- Strange order of execution react
- Reactjs: glue React code together old javascript code
- Order of reducer execution in React
- What are two arrows in a function in higher order function in React Javascript
- How to understand this fragment of code in javascript react
- How can I comment out some HTML code defined into the return() method of a React component?
- Azure DevOps React Container Production Build JavaScript heap out of memory error
- React run javascript code after all render is completed in function based component
- Refactoring javascript code react redux issue
- get information out of an API URL in JavaScript or react
More Query from same tag
- Learning React - ReferenceError
- How to pass string with no quotes as a parameter in function?
- Using comparison in useEffect's dependency array
- Object of objects JSON response from Django backend to React-Redux frontend
- Changing label border color on a radio button. Styled Components and React JS
- Field in redux-form not Editable
- How to bind react route to a shown dialog?
- ag-grid CellEditor cell height not correct
- Component only gets updated when wrapped in a `div`
- How to position the react flatpickr inside a container instead of body
- react js nuka carousel custom arrow positioning
- recompose withState how to update on props changes
- Correct way to use state in React
- react: ReactGridLayout.children[0].x must be a number
- In react Cannot read property 'setState' of undefined
- Next.js - webpack aliasing component folders doesn't work
- How to make componentWillUnmount work?
- Trouble Importing Image React
- react, get updated state after dispatch in functional component
- useForm hidden nested file input not working
- I want to use RTL, but not through all of my components
- How can I share state between two custom hooks?
- How do I re-render react components on url change?
- React Higher Order Component (HOC) in typescript
- Is there a way to install JSX syntax highlights/syles for Notepad++?
- Why new Date() won't render inside a JSX element (React)
- Redirect after successful sign in or sign up for credentials type in next auth
- How to use CKEditor for Mathematical Formulas with MathJax in Reactjs
- How to readjust positioning of Bootstrap Overlay/Popover in React dynamically?
- How do I pass in different values using reusable code?