Обновление компонента с использованием избыточного состояния не работает (передача состояния в качестве реквизита) - PullRequest
Новая
       6

Обновление компонента с использованием избыточного состояния не работает (передача состояния в качестве реквизита)

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

Я хочу адаптировать демо компонента реагировать на бесконечный скроллер для использования redux-thunk.

Я передаю некоторые переменные из свойств избыточного состояния, такие как свойства компонента (ScrollSample), чтобы использовать компонентact-infinite-scroller. В настоящее время действие scrollSample извлекает данные в this.props.tracks, увеличивая его размер 8 на 8 элементов (nextHref, raw и hasMoreItems являются вспомогательными переменными).

Когда компонент загружается, метод loadItems () запускает выборку первых 8 элементов в дорожке, но компонент не обновляется. Я загрузил другие 8 элементов (всего 16) с помощью метода componentDidMount (), но компонент также не обновлен. Наконец, я поставил 2 кнопки и вручную требую загрузки новостных элементов в переменную дорожек, но опять же, компонент не обновляется.

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

import React, { Component } from 'react';
import { connect } from 'react-redux';
import InfiniteScroll from 'react-infinite-scroller';
import { scrollSample } from '../../actions/search-form.action';

const mapStateToProps = state => ({
   tracks: state.searchReducer.scrollSample.tracks,
   nextHref: state.searchReducer.scrollSample.nextHref,
   hasMoreItems: state.searchReducer.scrollSample.hasMoreItems,
   raw: state.searchReducer.scrollSample,
});

const mapDispatchToProps = {
   scrollSample
};

class ScrollSample extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.scrollSample(0, this.props.tracks, this.props.nextHref);
    }

    encodeGetParams = (p) => {
        return Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");
    }

    loadItems(page) {
        this.props.scrollSample(page, this.props.tracks, this.props.nextHref);
    }

    onClick = () => {
        console.log(this.props.raw);
        console.log(this.props.tracks);
    }

    onClick2 = () => {
        this.props.scrollSample(0, this.props.tracks, this.props.nextHref);
    }

    render() {
        const loader = <div className="loader">Loading ...</div>;

        let items = [];
        this.props.tracks.map((track, i) => {
            items.push(
                <div className="track" key={i}>
                    <a href={track.permalink_url} target="_blank">
                        <img src={track.artwork_url} width="150" height="150" />
                        <p className="title">{track.title}</p>
                    </a>
                </div>
            );
        });

        return (
            <div>
                <button onClick={this.onClick}>global state</button>
                <button onClick={this.onClick2}>fecth more data</button>
                {items}
                <InfiniteScroll
                    pageStart={0}
                    loadMore={this.loadItems.bind(this)}
                    hasMore={this.props.hasMoreItems}
                    loader={loader}>

                    <div className="tracks">
                        {items}
                    </div>
                </InfiniteScroll>
            </div>

        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ScrollSample);
...