React でデータをモックする方法

React モック データ メソッド: まず、パブリック ディレクトリに [/api/headerList.json] ファイルを作成し、次に関連するコード [axios.get('/api/headerList.json')] を追加します。

#このチュートリアルの動作環境: Windows7 システム、React17 バージョン、thinkpad t480 コンピューター。

React モック データ メソッド:

次のコードは、入力がフォーカスを取得したときに getList() メソッドを呼び出します。

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

getList() メソッドは Ajax 経由でデータを取得しますが、この時点ではバックエンドがまだ書かれていないため、データを自分でモックします。

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 を探します。見つからないので公開します ディレクトリ内で見つけます このとき、公開ディレクトリに /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 )を通じて以下に示すようにデータを出力します。

このように、模擬データは成功します。

関連する無料学習の推奨事項: javascript(ビデオ)

以上がReact でデータをモックする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。