react中如何使用axios传数据

思路:首先在actionCreator.js中将axios请求写好,并且获取数据之后派发action,然后再组建中的mapDispatchToProps中去dispatch这个方法,然后将这个方法放到componentDidMount这个周期函数中,最后在reducer.js中去判断type,并且将数据返回出来,这样就实现啦!
具体代码:

//首先在actionCreator.js中,我需要使用axios,所以在顶部我需要引入
import axios from 'axios';
//然后这中间我们还需要使用actionType.js将type的字符串转化为常量,所以我们也需要引入actionType
import * as actionTypes from './actionTypes'
//在这里我们可以将action拿出来作为一个方法放在这里,等到需要的时候可以直接派发
const changeHomeData = (result) => {
	type:actionTypes.CHANGE_HOME_DATA,
	articleList:result.articleList,
    AuthorList:result.AuthorList
}
//然后在这里获取axios的数据
export const getChangeInfo = () =>{
	axios.get('./api/home.json).then((res) => {
		const result = res.data.data;
		dispatch(changeHomeData (result))
	}).catch((res) => {
        console.log('error')
    })
}

那么既然这里使用了actionTypes中的type,我们就需要在actionTypes.js中定义,并且导出出去。

export const CHANGE_HOME_DATA = '/home/CHANGE_HOME_DATA'

然后这些做完了,我们就可以在需要调用的地方去派发action

//由于需要与store做连接,我们需要引入connect
import { connect } from 'react-redux';
//需要使用actionCreators中的数据,所以需要引入
import { actionCreators }  from './store'
//在组件中,我们使用mapDispatchToProps派发一个action给store,告诉store我需要什么
const mapDispatchToProps = (dispatch) =>{
        return{
           changeHomeData() {
               dispatch(actionCreators.getChangeInfo())
           }
        }
    }
//那么做到这一步,我们就需要在componentDidMount这个周期函数中使用changeHomeData的方法
componentDidMount() {
        this.props.changeHomeData();
 }

到以上这一步时,差不多就要完了,这时候我们就去reducer中告诉store我需要什么数据,并且store会返回给我

//默认数据一定要的
const defaultState =fromJS({
    articleList:[],
    AuthorList:[]
})
//在这里改变数据
export default (state = defaultState,action) => {
    if(action.type === actionTypes.CHANGE_HOME_DATA){
        return state.set('articleList',fromJS(action.articleList)).set('AuthorList',fromJS(action.AuthorList));
    }
    return state
}

最后啦,最后啦,那就是去调用数据啦,需要调用数据,就需要去组建中的mapStateToProps中接收需要使用的数据啦,然后使用map循环调用

//接收数据
const mapStateToProps = (state) =>{
    return {
        list: state.components.get('articleList')
    }
}

//使用循环调用
{
                    this.props.list && this.props.list.map((item) => {
                        return (
                            <ListInfo key={item.get('id')}>
                                <ListLeft>
                                    <ListTitle>{item.get('title')}</ListTitle>
                                    <ListMessage>
                                        {item.get('desc')}
                                    </ListMessage>
                                </ListLeft>
                                <ListRight>
                                    <img src={item.get('imgUrl')} className='pic'/>
                                </ListRight>
                                <ListIcon>
                                    <ListSpan className='icon-meta'>
                                        <i className='iconfont'>&#xe6ad;</i>
                                        41.6
                                    </ListSpan>
                                    <ListSpan>
                                        一气浩然
                                    </ListSpan>
                                    <ListSpan>
                                        <i className='iconfont'>&#xe67a;</i>
                                        48
                                    </ListSpan>
                                    <ListSpan>
                                        <i className='iconfont'>&#xe641;</i>
                                        48
                                    </ListSpan>
                                    <ListSpan>
                                        <i className='iconfont'>&#xe611;</i></ListSpan>
                                </ListIcon>
                            </ListInfo>
                        )
                    })
                }

这样就完成啦!!
总结:
1.期间遇到的问题,就是json数据的格式写错了,所以一直获取不到数据,后来通过报错找到错误的地方。
2.item.get not function,这个错误是因为我在reducer.js中忘记将获取的数据变成一个immutable对象了,所以加上formJS就可以了。在这里插入图片描述

发布了23 篇原创文章 · 获赞 1 · 访问量 485

猜你喜欢

转载自blog.csdn.net/mini74/article/details/105044935