react如何mock数据

react mock数据的办法：第一在public名目下创立【/api/headerList.json】文件；然后参加相关代码【axios.get('/api/headerList.json')】。

本教程操纵环境：windows7系统、React17版，该办法适用于所有品牌电脑。

react mock数据的办法：

如下代码，在input获得焦点时调取getList()办法。

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

getList()办法是通过Ajax猎取数据，此时后端并没有写好，所以本人mock一个数据。

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')这句代码，运算时机第一去src名目下寻觅/api/headerList.json，没有寻到然后去public名目下寻，此时我们在public名目下创立/api/headerList.json文件，文件如下：

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

此时返回的数据就是以上数据，通过console.log(res.data)打印数据如下图：

这样mock数据就成功了。

相关免费学习引荐：javascript（视频）

以上就是react如何mock数据的具体内容，更多请关注百分百源码网其它相关文章！