Реагируйте: компонент подписывается на изменения в магазине - PullRequest
Новая
       6

Реагируйте: компонент подписывается на изменения в магазине

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

В настоящее время я пытаюсь использовать react-redux, чтобы подписаться на сохранение изменений для newsItems изменений.Мой текущий компонент, который работает, но не прослушивает изменения магазина, как должно быть, выглядит следующим образом: 

class Home extends Component {
  state = { loading: false };
  displayName = Home.name

  render() {
    let contents = this.renderContents(store.getState().newsItems);

    return (
      <div>  
        {contents}
      </div>
    );
  }

  renderContents = (newsItems) => {
    var largeNewsItems = newsItems.splice(0, 2);
    var firstNewsItem = largeNewsItems[0];
    var secondNewsItem = largeNewsItems[1];

    return (
          <div>
            <div>
              <LargeNewsItem newsItem={firstNewsItem} />
            </div>
            <div>
              <LargeNewsItem newsItem={secondNewsItem} />
            </div>
          </div>
    );
  }
}

export default Home;

при попытке обновить его, чтобы подписаться на магазин, я предпринял следующую попытку: 

class Home extends Component {
  state = { loading: false };
  displayName = Home.name

  render(props) {
    let contents = this.renderContents(props.newsItems);

    return (
      <div>  
        {contents}
      </div>
    );
  }

  renderContents = (newsItems) => {
    var largeNewsItems = newsItems.splice(0, 2);
    var firstNewsItem = largeNewsItems[0];
    var secondNewsItem = largeNewsItems[1];

    return (
          <div>
            <div>
              <LargeNewsItem newsItem={firstNewsItem} />
            </div>
            <div>
              <LargeNewsItem newsItem={secondNewsItem} />
            </div>
          </div>
    );
  }
}

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

export default connect(mapStateToProps)(Home);

, что приводит к ошибке:

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

, где я вызываю props.newsItems.

Что я делаю здесь неправильно и как я могу это преодолеть?

ОБНОВЛЕНИЕ: похоже, что я могу преодолеть это, используя: `render () {let contents = this.renderContents (this.props.newsItems); 

return (
  <div>  
    {contents}
  </div>
);

} `

однако моим LargeNewsItem компонентам иногда будут передаваться нулевые данные.Как я могу преодолеть это и по сути "подождать", пока newsItems не заполнится

1 Ответ

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

Одним из подходов может быть замена метода рендеринга, как показано ниже.

`

render() {
const newsItems = this.props.newsItems;
if(!newsItems) {
return null;
}
    let contents = this.renderContents(this.props.newsItems);

    return (
      <div>  
        {contents}
      </div>
    );
  }`

таким образом, если ваши новостные элементы равны нулю, вы не получите ошибку, и как только новостные элементы изменят ваш метод рендеринга, будет вызван снова

...