Я пытаюсь реализовать простой плоский список с 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()} />