React Redux 新数据替换当前数据而不是扩展它并且仅运行运行一次

Question

我正在使用这个包 https://github.com/RealScout/redux-infinite-scroll 在品牌列表上无限滚动。这是我的代码：

容器：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions, getBrands } from '../reducer';
import Infinite from 'react-infinite';
import InfiniteScroll from 'redux-infinite-scroll';
import SearchBox from '../components/SearchBox';
import CardList from '../components/CardList';

const { fetchBrands } = actions;

class BrandList extends Component {

    componentDidMount() {
        this.props.fetchBrands({ page: 1 });
    }

    renderList() {
        const brands = this.props.brands;
        return brands.map((brand) => {
            return (
                <CardList key={brand.id} name={brand.name} avatar={brand.avatar.thumbnail} follower={brand.follows_count} />
            );
        });

    }

    toggle() {
        return this.props.isFetching;
    }

    loadMore() {
        const {lastPage, currentPage} = this.props;
        const nextPage = currentPage ? parseInt(currentPage) + 1 : 1;
        if(currentPage && currentPage <= lastPage){
            this.props.fetchBrands({page: nextPage});
        }
    }

    render() {
        return (
            <div>
                <SearchBox />

                <div className="row">
                    <InfiniteScroll
                        items={this.renderList()}
                        loadMore={this.loadMore.bind(this)}
                        />
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        brands: getBrands(state),
        isFetching: state.brand.isFetching,
        currentPage: state.brand.currentPage,
        lastPage: state.brand.lastPage
    };
}

export default connect(mapStateToProps, { fetchBrands })(BrandList);

减速器：

import axios from 'axios';

// Define Types
export const types = {
    // brand list
    FETCH_BRANDS: 'fetch_brands',
    FETCH_BRANDS_SUCCESS: 'fetch_brands_success',
    FETCH_BRANDS_ERROR: 'fetch_brands_failure',
    FETCH_BRAND: 'fetch_brand',
    FETCH_BRAND_SUCCESS: 'fetch_brand_success',
    FETCH_BRAND_ERROR: 'fetch_brand_failure',
};

const { FETCH_BRANDS, FETCH_BRANDS_SUCCESS, FETCH_BRANDS_ERROR } = types;

// Define Reducer
export const INITIAL_STATE = { brands: [], brand: {}, isFetching: false, error: null, currentPage: 1 };

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case FETCH_BRANDS:
            return { ...state, isFetching: true };
        case FETCH_BRANDS_SUCCESS:
            return { ...state, brands: action.payload.brands.data, currentPage: action.payload.brands.current_page, lastPage: action.payload.brands.last_page };
        case FETCH_BRANDS_ERROR:
            return { ...state, error: action.payload };
        default:
            return state;
    }
}

// Define Actions
export const actions = {
    fetchBrands: ({page, count = 15}) => {
        return (dispatch) => {
            dispatch({ type: FETCH_BRANDS });
            axios.get(`brands?page=${page}&count=${count}`)
                .then((response) => {
                    const {data} = response;
                    if (data.code == 200) {
                        dispatch({ type: FETCH_BRANDS_SUCCESS, payload: data });
                    }
                });
        };
    }
};

// SELECTOR
export const getBrands = (state) => state.brand.brands;

它运行 loadMore 功能成功但它没有扩展当前列表，而是替换它。
loadmore 功能仅运行一次。它应该运行 10 次。

我的代码中是否遗漏了某些内容以使其滚动？

Answer 1

尝试添加

brands: [ ...state.brands, ...action.payload.brands.data]

像这样在你的reducer

case FETCH_BRANDS_SUCCESS:
     return { ...state, brands: [ ...state.brands, ...action.payload.brands.data], currentPage: action.payload.brands.current_page, lastPage: action.payload.brands.last_page };

这意味着您正在 concat 将当前列表与即将发布的列表（版本化数据）

React Redux 新数据替换当前数据而不是扩展它并且仅运行运行一次

React Redux new data replacing current data instead of extend it and function only run once

reactjs

react-redux

React Redux 新数据替换当前数据而不是扩展它并且仅运行 运行 一次

React Redux new data replacing current data instead of extend it and function only run once

reactjs

react-redux

React Redux 新数据替换当前数据而不是扩展它并且仅运行运行一次