Реагируйте на native / Redux / Pagination - Как предотвратить переход вида наверх при загрузке большего количества элементов? - PullRequest
Новая
       7

Реагируйте на native / Redux / Pagination - Как предотвратить переход вида наверх при загрузке большего количества элементов?

0 голосов
/ 02 июня 2018

Я использую реагировать native + redux и пытаюсь реализовать дополнительную функциональность.Я запрашиваю в свой componentDidMount первые 100 элементов, затем при нажатии я хочу запросить + показать следующие 100 элементов (плюс «старые 100 элементов и т. Д.) - все в том же виде.

Проблема: мой код работает, единственное, что я не могу понять - это когда я нажимаю кнопку «загрузить больше», мой вид переходит обратно наверх, а я хочу, чтобы вид оставался на месте первого загруженного нового элемента.,Ничто из того, что я видел онлайн, не помогло. Есть идеи?Также я довольно новичок, чтобы реагировать на native и redux, и был бы рад любым советам о том, как я могу реализовать (вроде) нумерацию страниц лучше, чем я делаю сейчас.

Спасибо большое!

Контейнерный компонент: 

class App extends React.Component {    
    state = {
        counter: 1
    }    
    componentDidMount () {
        this.props.fetchData(0)
    }    
    renderItems() {
        return this.props.data.map(item =>
            <Item
                key={item.id}
                name={item.name}
                symbol={item.symbol}
            />
        )    
    }    
    loadMoreData = () => {
        if (this.state.counter>0) {
            this.props.fetchCoinData(`${this.state.counter}01`);
            this.state.counter++;
        }
    }

    render() {
        if (this.props.isFetching) {
            return (
                <View>
                    <Spinner
                        visible={this.props.isFetching}
                        textContent={"Loading..."}
                    />
                </View>
            )
        }
        return (
            <View>
                <ScrollView>
                    {this.renderItems()}
                    <View>
                        <Button
                            title="Load more"
                            onPress={this.loadMoreData}
                        />
                    </View>
                </ScrollView>
            </View>
        )
    }   
}

mapStateToProps = state => {
    return {
        isFetching: state.dataReducer.isFetching,
        data: state.dataReducer.data
    }
}    
export default connect(mapStateToProps, {fetchData})(App)

В своем действии я отправляю (я могу добавить остальную часть кода, если это необходимо): я всегда получаю 100 элементов из моего запроса API (каждый запрос ограничен100 в любом случае) 

export const fetchData = (start) => {
  ...

  return axios.get(`${api_root_url}/v1/?start=${start}`)
   ....
}

В моем редукторе я присоединяю новые данные из нового запроса API к «старым» данным.мой редуктор: 

const initialState = {
    isFetching: null,
    data: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCHING__DATA:
            return {
                ...state,
                isFetching: true
            }

        case FETCH__DATA_SUCESS:
            return {
                ...state,
                isFetching: false,
                data: [...state.data, ...action.payload]
            }

        default:
            return state;
    }
}

ОБНОВЛЕНИЕ: я обнаружил FlatList из собственного кода реакции и использовал его - однако проблема перехода наверх после извлечения новых данных все еще существует ..

ОБНОВЛЕНИЕ: ИспользованиеFlatList ДЕЙСТВИТЕЛЬНО решил мою проблему!Кроме того, я выяснил, почему мой взгляд продолжал прыгать наверх - это потому, что в моем рендеринге у меня есть условие, если this.props.isFetching -> show spinner, и это вызывало прыжок.

...