JSON is not handled properly in react and not saved in the state

Question

I am having an issue while getting JSON data.

Code having the issue is:


constructor(props, context) {
        super(props);
        this.state = {anchorEl: null, 
            showJoin: false,
            classDetailsInfo: {
                classpic: [],
                reviews: []
            },
            onError: false
        }
    };

componentDidMount = () => {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const id = urlParams.get('id')

        console.log("this is my id: " + id)
        if(urlParams.has('id') && (id !== '')) {
            this.setState({userInfo: ClassDataUseCase.getClassDetails(id)})
            this.setState({onError: false})
            console.log(this.state.userInfo)
        } else {
            this.setState({onError: true})
        }
    }

the ClassDataUseCase is just a "abstraction layer to grab the proper data.

class ClassDataUseCase {

    static getClassDetails(id) {
        var jsonClasses = JSON.parse(JSON.stringify(ClassDetailsData.Classes));
        console.log(jsonClasses)
        for(let k=0;k< jsonClasses.length;k++){
            if(jsonClasses[k].id === id){
                console.log(jsonClasses[k])
              return jsonClasses[k];
            }
        }
        console.log("We are f***ed up")
    }
}

The JSON is properly returned but when I try to check the content of the this.state.classDetailsInfo, I just got undefined in the console. I thought at first that I have to run through a JSON.parse but it's failing as well.

I am probably not saving it properly in the state.

In the code you posted you set the `userInfo`, not the `classDetailsInfo`. The syntax seems right. — k-wasilewski, Jul 17 '20 at 17:39
Does this answer your question? [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — Emile Bergeron, Jul 17 '20 at 18:03

score 0 · Answer 1 · edited Jul 17 '20 at 17:55

As @k-wasilewski points out in the comments, you are setting state of userInfo, not classDetailsInfo. So depending on whether this was just a typo in your question, it may explain the issue you're trying to solve.

If, however, you're actually trying to check the value of userInfo, there is a potential issue with these lines:

this.setState({userInfo: ClassDataUseCase.getClassDetails(id)})
this.setState({onError: false})
console.log(this.state.userInfo)

setState changes may not be applied immediately, so it is possible that the console.log is being invoked before setState is finished. You can pass a callback to setState to guarantee the order of execution:

this.setState({userInfo: ClassDataUseCase.getClassDetails(id)}, () => console.log('updated userInfo:', this.state.userInfo))

JSON is not handled properly in react and not saved in the state

1 Answers1