javascript – React：在调用最终渲染方法之前异步调用更新状态

2019年7月20日 136次阅读

背景：

我正在尝试使用React根据来自某些web服务的json响应来更新一些UI元素,但是因为我有很多要渲染的元素,所以我试图通过仅在更新元素的HashCode时拉json来减少带宽.在我的应用程序的上下文中,我无法更新我的ajax调用的异步行为.只有在异步调用完成后才强制更新元素的正确方法是什么？

我意识到在WillUpdate中设置状态是错误的.

例：

    getInitialState: function getInitialState() {
        return { hash: 0, json: {}};
    },

    //Only get the step asJSON if the hash is updated
    shouldComponentUpdate: function(nextProps, nextState) {
        return this.state.json.hash != nextState.json.hash;
    },

    tick: function(){
        this.updateHash();
    },

    updateHash: function updateHash(){
        something.getUpdateHash(function(data){
            var hashR = data.responseJSON;
            this.setState({hash: hashR});
        }.bind(this));
    },

    updateJSON: function(){
        //This is an asynchronous call
        something.getJSON(function(data){
            var stepJ = jQuery.parseJSON(data.responseJSON);
            this.setState({json: stepJ});
        }.bind(this));
    },

    componentWillMount: function(){
        this.updateJSON();
    },

    componentDidMount: function(){
        this.interval = setInterval(this.tick, 10000);
    },

   componentWillUpdate: function(nextState, nextProps){
       //Way to update json state w/o affecting state? 
   },

    render: function render() { 
       /** Only do render after updateJSON is complete **/
   }

最佳答案 如何在updateHash的回调中调用updateJSON

updateHash: function updateHash(){
    something.getUpdateHash(function(data){
        var hashR = data.responseJSON;
        if(hashR!==this.state.hash){
            this.updateJSON(hashR)
        }
    }.bind(this));
},

updateJSON: function(hash){
    //This is an asynchronous call
    something.getJSON(function(data){
        var stepJ = jQuery.parseJSON(data.responseJSON);
        this.setState({json: stepJ,hash});
    }.bind(this));
},
点赞