React setState呈现三次

时间:2016-12-12 14:49:38

标签: javascript json reactjs render setstate

伙计们,我正在使用React并且有一个问题: 我正在从json创建一个数组数组,当我在构造函数中执行setState时,它会渲染三次。第一次和第二次我得到一个空数组,第三次我得到一个数据数组,我需要。 那么,问题是,如何仅从第三次渲染获取数据,或者如何优化我正在使用的方法?

这是我的构造函数(props){

    super(props);
    this.state = {
        q: '',
        a: '',
        array: [],
    };

    var that = this;
    var q = [];
    var a = [];
    var r = [];
    var arr = [];

    axios.get('/api/sample/data.json')
        .then(function (response) {
            var example = response.data.attributes.responses;
            var q = that.props.first_object.map((q) => {
                q.push({
                    q: q.text
                })
            })
            var responses = example.map((res) => {
                if (res.string_value){
                    a.push({
                        a: res.string_value,
                        q: res.q
                    })
                }
                else if (res.text_value){
                    a.push({
                        a: res.text_value,
                        q: res.q,
                    })
                }
                else if (res.string_value == null || res.string_value == '' || res.text_value == null){
                    a.push({
                        a: res.a,
                        q: res.q
                    })
                }
            })
            for(var i = 0; i < a.length; i++){
                var _q = q[i].q;
                var _a = '';
                var _q= '';
                for(var j = 0; j < a.length; j++){
                    if (_q == a[j].q){
                        _a = a[j].a
                        break
                    }
                }
                var username = that.props.user.map((u) => {
                    if (response.data.attributes.user_id == u.user_id){
                        return u.first_name + ' ' + u.last_name
                    }
                })
                var user = ''
                for (var u = 0; u < username.length; u++) {
                    if (username[u] !== undefined) {
                        user = username[u]
                        break
                    }
                }
                r[0] = user
                r.push(_q)
                r.push(_a)
            }
            var name = r[0];
            for (var b = 1; b < r.length; b+=2) {
                arr.push([r[0],r[b],r[b+1]])
            }
            that.setState({array: arr})
        })
        .catch(function (error) {
            console.log(error);
        });

first and second renderings

third rendering

0 个答案:

没有答案