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就可以了。

• 点赞
• 收藏
• 分享
• 文章举报