How to mock data in react

React mock data method: First create the [/api/headerList.json] file in the public directory; then add the relevant code [axios.get('/api/headerList.json')].

#The operating environment of this tutorial: windows7 system, React17 version, thinkpad t480 computer.

React mock data method:

The following code calls the getList() method when the input gains focus.

const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus() {
            dispatch(actionCreators.getList())
        }
    }
}

The getList() method obtains data through Ajax. At this time, the backend has not been written yet, so I mock the data myself.

export const getList = () => {
    return (dispatch) => {
        axios.get('/api/headerList.json').then((res) => {
            const data = res.data;
            console.log(data)
        }).catch(() => {
            console.log('error')
        })
    }
}

axios.get('/api/headerList.json')With this code, the computer will first go to the src directory to look for /api/headerList.json. If it is not found, it will go to public Find it in the directory. At this time, we create the /api/headerList.json file in the public directory. The file is as follows:

{
    "success":true,
    "data":["微信","支付宝","蚂蚁金服","被骗","借呗","诈骗","盗窃","pandas","TensorFlow","PyTorch","Caffe","scikit-learn","Python","Keras","pyecharts","ggplot","Matplotlib","Gensim","Bokeh","Theano","Scrapy","SciPy","Plotly","NumPy","XGBoost","是","他","有","光大永明","我","要","人","Android","女","大","不","着","男","它","二","于","中","java","把","上","这","下","的","了","来"]
}

The data returned at this time is the above data, through console.log(res.data )Print the data as shown below:

In this way, the mock data will be successful.

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to mock data in react. For more information, please follow other related articles on the PHP Chinese website!