时间戳

首页 > 解决方案 > JSON在反应中没有正确处理并且没有保存在状态中

javascript - JSON在反应中没有正确处理并且没有保存在状态中

问题描述

我在获取 JSON 数据时遇到问题。

有问题的代码是：


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})
        }
    }

这ClassDataUseCase只是一个“获取正确数据的抽象层。

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")
    }
}

JSON 已正确返回，但是当我尝试检查 的内容时this.state.classDetailsInfo，我刚刚进入undefined控制台。起初我以为我必须通过a JSON.parse，但它也失败了。

我可能没有在该州正确保存它。

标签： javascriptreactjs

解决方案

正如@k-wasilewski 在评论中指出的那样，您正在设置状态userInfo，而不是classDetailsInfo。因此，根据这是否只是您问题中的错字，它可能会解释您要解决的问题。

但是，如果您实际上是在尝试检查 的值userInfo，则这些行可能存在问题：

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

setState更改可能不会立即应用，因此可能console.log在 setState 完成之前被调用。您可以传递一个回调来setState保证执行顺序：

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

推荐阅读