Question

我想修改demo的react-infinite-scroller组件以使用redux-thunk。

我正在从redux-state传递一些变量，例如组件属性（ScrollSample）以使用react-infinite-scroller组件。当前，scrollSample动作会在this.props.tracks中读取数据，从而增加其大小（由8 x 8元素组成）（nextHref，raw和hasMoreItems是辅助变量）。

在加载组件时，loadItems（）方法运行，以获取tracks变量中的前8个元素，但组件未更新。我使用componentDidMount（）方法加载了其他8个元素（总共16个），但两个组件均未更新。最后，我放了2个按钮，并手动要求将新闻元素加载到tracks变量中，但是同样，该组件未更新。

我不确定是什么问题，redux状态的tracks变量正在更新（通常，我使用按钮来加载新值，并且它可以正常工作，因为我看到在redux状态的tracks变量的大小正在增加并且显然在组件的props中），但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);

使用redux状态更新组件无效（将状态作为prop传递）

0 个答案: