我在Redux / Thunk中使用React Native和Expo,我尝试用我的API结果填充3个Pickers。
在我的主要组件中,我有:
class LoginFormAfter extends Component {
componentDidMount() {
this.props.actions.getConfig("TypeLevel");
this.props.actions.getConfig("TypePosition");
this.props.actions.getConfig("TypeTeam");
}
还有3个这样的选择器:
<Picker
onValueChange={(itemValue, itemIndex) => this.props.actions.setPosition(itemValue)}>
{this.props.positions.map((position) => {
return (
<Picker.Item label={position.name} value={position.id} key={position.id} />
)
})}
</Picker>
我的动作文件是:
export function getConfig(type) {
return dispatch => {
let url = API_URL +'config/get';
return axios.get(url, {
params: {
type: type
}
})
.then(async res => {
console.log(new Date().getTime() +' - '+ type);
switch (type) {
case "TypeTeam":
dispatch({type: "GET_TEAMS_SUCCESS", teams: res.data.response.content});
break;
case "TypePosition":
dispatch({type: "GET_POSITIONS_SUCCESS", positions: res.data.response.content});
break;
case "TypeLevel":
dispatch({type: "GET_LEVELS_SUCCESS", levels: res.data.response.content});
break;
}
});
};
}
我的减速器是:
export default function(state = initialState, action) {
switch(action.type) {
case "GET_TEAMS_SUCCESS":
return {
...state,
teams: action.teams,
};
case "GET_POSITIONS_SUCCESS":
return {
...state,
positions: action.positions,
};
case "GET_LEVELS_SUCCESS":
return {
...state,
loading: false,
levels: action.levels,
};
我的问题是:最后一个动作( getConfig(...))没有填满选取器。我不明白,就像我的组件未渲染 componentDidMount()中的最后一个动作一样。
我做错了什么?