React's setState mutates variable

Question

Very strange behavior, most probably a bug in my code:

I get an API response object (json) and when I setState using one of the object's properties as value, the object changes. I thought this was a problem with the backend or fetch method, but it has been proven not to be.

Code is generally as follows:

fetch(this.props.url, {
    method: 'POST',
    body: JSON.stringify({
        class: 'property',
        action: 'view', 
        objectId: this.props.element.id,
        token: this.props.token,
    }),
})
    .then(response => response.json())
    .then(json => {
        this.setState({
            property: json.property
        });
        console.log(json);
    })

What I am supposed to get:

{
        property: {
            units: {
                {
                    id: 31,
                    ...
                },
                {
                    id: 33,
                    ...
                }
            }
        }
    }

{

What I actually get:

    property: {
        units: {
            {
                id: 33,
                ...
            },
            {
                id: 33,
                ...
            }
        }
    }
}

Needless to say, response from backend is with the proper ids, which are unique.

Any ideas what I might have done wrong? This is not supposed to happen, is it? How does the json variable change?

Thanks.

log `json.property` before `setState()` and log `this.state` after `setState()`. I would guess this data comes already this way from the api. also the content of response would be nice to see just to be sure. — Jack O'Neill, Feb 21 '19 at 09:09
https://stackoverflow.com/a/42038724/2404452 a lot people think `setState` happens immediately, which is wrong. The log data does not reveal state after calling `setState`. Please use callback to get the actual data update and share the result with us. — blaz, Feb 21 '19 at 09:22
All valid concerns. Now, the response from the API is validated three ways - 1) Postman, 2) console.log(JSON.stringify(json)), 3) commenting out the 'property: json.property' line within setState function. All these result in the correct ids. Regarding immediacy of setState, I've done the callback '..., () => console.log(this.state)' and it returns the wrong ids. — plamenh, Feb 21 '19 at 09:49

score 0 · Answer 1 · answered Feb 22 '19 at 07:20

Ok, found my mistake. It is very confusing and honestly, I believe this should not happen by design, but anyways:

Once I set state.property to json.property, I pass the state.property as a prop to a child element. Within that child element I am doing some filtering and mapping using props.property and at one point I've mistakenly used a single equal (=) sign instead of double (==) when comparing the ids in a filter function.

Apparently this sets the wrong id and goes all the way back to the initial json response (so, filter function -> child element props -> ?parent element state? -> json response). So, be ccareful with your filter functions, unless you want to spend a few days tracking the impossible.

React's setState mutates variable

1 Answers1