Пустой массив из действия приставки после «используемого» в компоненте реакции - PullRequest
0 голосов
/ 03 февраля 2019

Компонент 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...