Компонент React вызывает действие приставки, которое получает ответ (двумерный массив доступных коллабораций) с внутреннего сервера и отправляет данные в редуктор, который устанавливает его в состояние.
Редуктор:
case GET_COLLABS:
return {
...state,
collabs: action.payload,
loading: false
};
Действие:
export const getCollabs = () => dispatch => {
dispatch(setLoadingState());
axios
.get("/api/collab")
.then(res => {
console.log(res.data);
dispatch({
type: GET_COLLABS,
payload: res.data
})
}
)
.catch(err =>
dispatch({
type: GET_COLLABS,
payload: null
})
);
};
Компонент:
componentWillMount(){
this.props.getCollabs();
this.props.getCurrentProfile();
}
componentWillReceiveProps() {
this.setState({
collabs: this.props.collab.collabs
})
}
render() {
const { collabs, loading } = this.props.collab;
const { profile } = this.props.profile;
let collabsContent;
if (collabs === null || loading || profile === null) {
collabsContent = <Spinner />;
} else {
if (collabs.length > 0 && profile.interests.length > 0) {
collabsContent = collabs.map((collab, index) => <CollabSection key={index} collabs={collab} head={profile.interests[index]} />);
} else {
collabsContent = <Spinner />;
}
}
return(doesnt matter)
CollabFeed.propTypes = {
collab: PropTypes.object.isRequired,
getCollabs: PropTypes.func.isRequired,
getCurrentProfile: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
collab: state.collab,
profile: state.profile
});
export default connect(
mapStateToProps,
{ getCollabs, getCurrentProfile }
)(CollabFeed);
Когда я закомментирую
collabsContent = collabs.map((collab, index) => <CollabSection key={index} collabs={collab} head={profile.interests[index]} />);
от компонента, он работает просто отлично (он, очевидно, ничего не отображает в браузере, носостояние избыточности такое, как и ожидалось) https://imgur.com/a/JyjLxbR Но когда я оставляю его как есть, все отображается так, как если бы данные были заданы, но в хранилище избыточных данных есть пустые массивы ... https://imgur.com/a/hlPaY2x
когда консоль.log (res.data) из действия выглядит так же, как state.collab