React Native - добавление элементов loadmore в FlatList с помощью Redux - PullRequest
0 голосов
/ 23 октября 2019

Я пытаюсь реализовать простой плоский список с Redux.

Я пытаюсь достичь элементов 5 на 5 в handlefetchmore и сопоставить новое значение с данными! Для этого я отправляю элемент "oldkey" с первым ключом моего обращенного массива для получения 5 следующих с помощью firebase

, похоже, он работает, но у меня много повторяющихся записей и, в конце, бесконечный цикл с последнимentry ??!

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

Любая помощь длявычисление этого приветствуется.

Это мой код (без импорта):

Nicelist Component

class NiceList extends React.Component {
    state = {
        data: [],
    }

    allReducer(oldkey) {
        // No need to set state here as you are now passing this data to Redux store

        this.props.dispatch({
            type: 'UPDATE_OLD_KEY',
            payload: oldkey,
        });
    }

    _renderItem = ({item}) => (
        <View style={{borderBottomWidth: 1, marginTop: 20}}>
            <Image source={{uri: item.url}} style={{height: 200}} />
            <Text>{item.value.question}</Text>
            <Text>{item.key}</Text>
        </View>
    );

    // _getData 함수 수정
    _getData = () => {
        console.log('getdata');
        let toast = this.props.questions

        this.setState({
            data: this.state.data.concat(toast),
            oldkey: toast[toast.length - 1].key
        })

        console.log(this.state.oldkey)
        this.allReducer(this.state.oldkey)
    }

    componentDidMount() {
        this._getData();
    }

    // here
    _handleLoadMore = () => {
        console.log("loadmore")
        this._getData();
    }

    render() {
        //console.log(this.state.data)
        return (
            <FlatList
                data={this.state.data}
                renderItem={this._renderItem}
                keyExtractor={(item, index) => index.toString()}
                onEndReached={this._handleLoadMore}
                onEndReachedThreshold={1}
                extraData={this.state.oldkey}
            />
        );
    }
}

function mapStateToProps(state) {
    return {
        Empnumber: state.Empnumber
    }
}

export default connect(mapStateToProps)(NiceList);

редуктор

var initialState = {
    oldkey: 'none'
}

export default function allReducer(state = initialState, action) {
    //  console.log(action)
    if (action.type === "UPDATE_OLD_KEY") {
        return {
            ...state,
            oldkey: action.payload,

        };
    }
    if (action.type === "LIST_IS_LOADING") {
        return {
            ...state,
            isLoading: action.isLoading,
        };
    }
    return state;
}

Enhancer

import {compose, withHandlers, withStateHandlers, withProps, lifecycle} from 'recompose'
import {firebaseConnect} from 'react-redux-firebase'
import {Alerts, spinnerWhileLoading} from '@components'
import {connect, useSelector} from 'react-redux'
import {Component} from "React";

mapStateToProps = (state, ownProps) => {
    let questions = state.firebase.ordered.questions;

    // console.log(state.homeReducer.startAt)
    const page = state.homeReducer.page
    const oldkey = state.homeReducer.oldkey

    //change = JSON.stringify(questions, null, 1);

    //  const toast = state.firebase.database().ref()
    //console.log(questions)
    return {questions, page, oldkey}
}

export default compose(
    connect(mapStateToProps, null),
    firebaseConnect(props => {
        let oldkey = props.oldkey
        console.log(oldkey)
        const limit = 5;

        if (oldkey == 'none') {
            console.log('1errrr')
            return [
                {type: 'once', path: '/questions', queryParams: ['orderByKey', 'limitToLast=' + limit]}
            ]
        } else {
            //let oldkey = "-LrcqFlaoOxIRRSrLLKC"
            console.log('suivant')
            return [
                {type: 'once', path: '/questions', queryParams: ['orderByKey', 'endAt=' + oldkey, 'limitToLast=6']}
            ]
        }
    }),
    spinnerWhileLoading(['questions']),
)

Компоненты вопроса

<NiceList questions={questions.reverse()} />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...