React / Redux: TypeError: Невозможно прочитать свойство undefined - PullRequest
Новая
       7

React / Redux: TypeError: Невозможно прочитать свойство undefined

0 голосов
/ 28 февраля 2019

В настоящее время я пытаюсь реализовать React / Redux в одном из моих представлений и получаю исключение:

TypeError: Невозможно прочитать свойство 'newsItems' из неопределенного

ошибка в функции mapStateToProps в строке newsItems: state.newsItems,

мой редуктор инициализирует newsItems как пустой массив, поэтому я не уверен, почему это когда-либо будет undefined

MyКомпонент выглядит следующим образом: 

class PublicLayout extends Component {
  displayName = PublicLayout.name

  constructor(props) {
    super(props);
  }

  retrieveNewsItemsAndArticles = (newsType) => {
    //this method populates the articles and newsitems in the store.
  };

  updateNewsItems = (newsType) => {
    this.retrieveNewsItemsAndArticles(newsType);
  }

  render() {
      if(this.props.articles == null || this.props.newsItems == null){
        this.retrieveNewsItemsAndArticles(0);
      }
      else{
          if(initialLoad){
              initialLoad = false;
          }
      }

    let contents = this.props.articles == null || this.props.newsItems == null ? (
      <p>
          <em>Loading...</em>
      </p>
      ) : (
        this.renderContents()
      );

    return (
      <div className="container">  
        <PageHeader />
        <NavBar onSelectNewsType={this.updateNewsItems}/>

        {contents}
      </div>
    );
  }

  renderContents = () => {
    return (
      <div>
        <div>
          <HorizontalArticleBar />
        </div>
        <div className="row">
          <div className="col-lg-7">
            {this.props.children}
          </div>
          <div className="col-lg-5">
            <VerticalNewsItemBar />
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = function(state) {
  return {
    newsItems: state.newsItems,
    articles: state.articles
  }
}

export default withApollo(connect(mapStateToProps)(PublicLayout));

редуктор: 

const initialState = {
  articles: [],
  newsItems: []
};

function RootReducer(state = initialState, action) {
  if(action.type === "REMOVE_NEWSITEMS"){
      return Object.assign({}, state, {
          newsItems: []
      });
  }
  //more here but never setting newsItems to null
};

export default RootReducer;

Большинство других подобных проблем, которые я обнаружил, связано с тем, что начальное состояние не инициализируется ненулевым значением, однако яЯ предоставляю начальное значение (пустой массив)

РЕДАКТИРОВАТЬ: мое хранилище редуксов выглядит следующим образом: 

import { createStore } from "redux";
import RootReducer from "./reducers/RootReducer";

const store = createStore(RootReducer);

export default store;

1 Ответ

0 голосов
/ 01 марта 2019

Я скопировал ваш код с некоторыми изменениями, чтобы обеспечить.Проблема в вашем редукторе. 

function RootReducer(state = initialState, action) {
  if(action.type === "REMOVE_NEWSITEMS"){
      return Object.assign({}, state, {
          newsItems: []
      });
  }

  return state; // You need to return state
};

По умолчанию все редукторы должны возвращать объект состояния в любом состоянии.Даже если это не подходит ни к какому случаю или условию.В вашем корневом редукторе вам нужно вернуть состояние.

...