Question

我目前正处于React项目中，后端发送的数据在到达前端时正在被修改。我可能错过了一些非常愚蠢的东西，但我无法弄清楚它在上帝的位置上是不是很糟糕。

前端组件

import React from 'react';
//.. import bunch of other things

const styles = theme => ({
    root: {},
    sectionTitle: {
        margin: '20px 0 35px 0'
    },
    sectionTitleNoTop: {
        margin: '0 0 35px 0'
    },
    gap50: {
        margin: 50
    }
});

class RankingsPage extends React.Component {
    state = {
        tableData: null,
        tableDataEarnings: null,
        barData: null,
        barDataEarnings: null,
        tableError: ''
    };

    constructor(props) {
        super(props);

        this.getBarData = this.getBarData.bind(this);
    }

    componentWillMount() {
        this.getBarData(false);   //first request
        this.getBarData(true);    //second request
    }

    async getBarData(earnings) {
        let response = await axios.get(`/api/ranking/ranking_barchart?earnings=${earnings}`);

        let {success, data, error} = response.data;

        console.log(earnings);
        console.log(data);

        //The first request works fine. retrieves following

        //[ { fill: true,
        //    backgroundColor: 'rgba(58, 79, 212, 0.4)',
        //    data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
        //  { fill: true,
        //    backgroundColor: 'rgba(239, 49, 81, 0.4)',
        //    data: [ 0, 0, 0, 0, 10, 0, 15, 6, 10, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0 ] } ]

        //Second request gives this

        //[ { fill: true,
        //    backgroundColor: 'rgba(58, 79, 212, 0.4)',
        //    data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
        //  { fill: true,
        //    backgroundColor: 'rgba(239, 49, 81, 0.4)',
        //    data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] } ] 
        //Notice that this part is different from the first


        if (!success) {
            return this.setState({barDataError: error});
        }

        if (!earnings) {
            return this.setState({barData: data});
        }

        this.setState({barDataEarnings: data});
    }

    render() {
        const {classes} = this.props;
        const {tableData, tableDataEarnings, barData, barDataEarnings} = this.state;

        return (
            <div className={classes.root}>
               //I'm using this.state.barData and this.state.barDataEarnings here - I don't think this code has anything to do with the problem but if you need it I'll provide
            </div>
        );
    }
}

export default withStyles(styles)(RankingsPage)

除了url中的查询值不同之外，组件完全相同的请求。但是，第二个索引对象的数据与第一个索引的数据不同。

现在更有意思的是后端。

app.get('/api/ranking/ranking_barchart', authorize, async (req, res) => {
    try{
        let earnings = req.query.earnings === 'true';

        // let sortBy = earnings ? {totalReceived: -1} : {totalDonated: -1};

        let sortBy = {totalReceived: -1};

        let topUsersResult =
            await User.find({})
                .sort(sortBy)
                .limit(20)
                .lean()
                .exec();

        let returnBody = {
            labels: [],
            datasets: []
        };

        let donationsMade = {
            fill: true,
            backgroundColor:'rgba(239, 49, 81, 0.4)',
            data: []
        };

        let donationsReceived = {
            fill: true,
            backgroundColor:'rgba(58, 79, 212, 0.4)',
            data: []
        };

        for(let i = 0; i< topUsersResult.length; i++) {
            let curResult = topUsersResult[i];

            returnBody.labels.push(curResult.username);

            donationsMade.data.push(
                curResult.totalDonated ? curResult.totalDonated : 0
            );

            donationsReceived.data.push(
                curResult.totalReceived ? curResult.totalReceived : 0
            );
        }

        returnBody.datasets.push(donationsReceived);
        returnBody.datasets.push(donationsMade);

        console.log(returnBody.datasets);   //Print here is EXACTLY the same for both requests as expected

        res.json(API_MSG.successMsg(returnBody));

    }catch(e){
        res.json(API_MSG.errorMsg(e, MSG_TYPES.FIND_ERROR, true));
    }
});

我没有使用earnings查询来测试EXACT相同的响应。上面的代码几乎没有必要，因为console.log值与下面显示的完全相同。 console.log对上面的代码发表了评论，打印出以下内容

//First Request
[ { fill: true,
    backgroundColor: 'rgba(58, 79, 212, 0.4)',
    data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
  { fill: true,
    backgroundColor: 'rgba(239, 49, 81, 0.4)',
    data: [ 0, 0, 0, 0, 10, 0, 15, 6, 10, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0 ] } ]

//Second Request
[ { fill: true,
    backgroundColor: 'rgba(58, 79, 212, 0.4)',
    data: [ 11, 8, 8, 5, 5, 4, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] },
  { fill: true,
    backgroundColor: 'rgba(239, 49, 81, 0.4)',
    data: [ 0, 0, 0, 0, 10, 0, 15, 6, 10, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0 ] } ]

请告诉我，我并不疯狂。从服务器返回的EXACT相同的响应如何在被传输到前端时被修改？

在axios.get请求期间修改的数据

0 个答案: