> 웹 프론트엔드 > JS 튜토리얼 > 반응에서 데이터를 조롱하는 방법

반응에서 데이터를 조롱하는 방법

coldplay.xixi
풀어 주다: 2023-01-04 09:36:32
원래의
6169명이 탐색했습니다.

모의 데이터 반응 방법: 먼저 공용 디렉터리에 [/api/headerList.json] 파일을 만든 다음 관련 코드 [axios.get('/api/headerList.json')]를 추가합니다.

반응에서 데이터를 조롱하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, React17 버전, thinkpad t480 컴퓨터.

React 모의 데이터 메서드:

다음 코드는 입력에 포커스가 있을 때 getList() 메서드를 호출합니다. 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)rrreee

getList() 메소드는 Ajax를 통해 데이터를 얻습니다. 이때 백엔드는 아직 작성되지 않았으므로 직접 데이터를 모킹합니다.

rrreee반응에서 데이터를 조롱하는 방법axios.get('/api/headerList.json')이 코드를 사용하면 컴퓨터는 먼저 src 디렉터리로 이동하여 /api/headerList.json을 찾습니다. 발견되면 public 디렉터리로 이동하여 찾습니다. 이때 public 디렉터리에 /api/headerList.json 파일을 생성합니다. 파일은 다음과 같습니다.

rrreee

이때 반환된 데이터는 위의 데이터를 console.log(res.data)를 통해 출력하면 아래와 같습니다.

이렇게 하면 모의 데이터가 성공합니다. 관련 무료 학습 권장사항:

javascript
🎜🎜(동영상)🎜🎜🎜

위 내용은 반응에서 데이터를 조롱하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿