Как получить больше данных, когда прокрутить FlatList реагировать на родной?

Question

Я применяю ленивую загрузку в плоский список. Но я получаю больше данных, только когда прокручиваю последний элемент. Как я могу реализовать получить больше данных при прокрутке вверх. Я попробовал onRefre sh Я не знаю, почему список не обновился, но данные изменились. У кого-нибудь есть идеи по этим вопросам?

   <FlatList
      style={props.style}
      renderItem={renderRow}
      data={data}
      keyExtractor={(item, index) => String(index)}
      onRefresh={onRefresh}
   />

   function onRefresh(){
      dataFetch = fetchMoreData()
      setData([ ...dataFetch, ...data ])
   }

Пожалуйста, помогите мне. Спасибо

Answer 1

Если я правильно понял вашу проблему, то вы ищете бесконечную прокрутку в Flatlist. Этого можно добиться с помощью атрибутов onEndReached и onEndThreshold.

Рассмотрим следующий прототип

Предполагая, что вы сохраняете записи в this.state.profiles.

Получение новых записей с сервера

Установка начального номера страницы в конструкторе

constructor(props){
   super(props);
   this.state = { page: 0}
}

Выборка новых записей

fetchRecords = (page) => {
    // following API will changed based on your requirement
    fetch(`${API}/${page}/...`)
    .then(res => res.json())
    .then(response => {
       this.setState({
           profiles: [...this.state.profiles, ...response.data] // assuming response.data is an array and holds new records
       });
    });
}

для обработки прокрутки

onScrollHandler = () => {
     this.setState({
        page: this.state.page + 1
     }, () => {
        this.fetchRecords(this.state.page);
     });
}

Функция рендеринга

render() {
    return(
        ...
        <FlatList
           data={this.state.profiles}
           renderItem={({ item, index }) => this.renderCard(item, index)}
           keyExtractor={item => item.id}
           ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
           onEndReached={this.onScrollHandler}
           onEndThreshold={0}
        />
        ...
    );
}

Локальные обновления

Если вы уже извлекли все данные, но хотите показать только 10 одновременно, тогда все, что вам нужно сделать, это изменить fetchRecords

fetchRecords = (page) => {
  // assuming this.state.records hold all the records
  const newRecords = []
  for(var i = page * 10, il = i + 10; i < il && i < this.state.records.length; i++){
      newRecords.push(this.state.records[i]);
  }
  this.setState({
    profiles: [...this.state.profiles, ...newRecords]
  });
}

При вышеуказанном подходе индикатор активности будет отображаться при извлечении записей.

Надеюсь, это поможет!

Answer 2

extraData обеспечит обновление FlatList - https://reactnative.dev/docs/flatlist#extradata

 const [ renderCount, setRenderCount ] = useState(0);

 <FlatList
      style={props.style}
      renderItem={renderRow}
      data={data}
      keyExtractor={(item, index) => String(index)}
      onRefresh={onRefresh}
      extraData={renderCount}
   />

   function onRefresh(){
      dataFetch = fetchMoreData()
      setData([ ...dataFetch, ...data ])
      setRenderCount(renderCount + 1);
   }

Answer 3

Основываясь на вашем описании, я написал код, который можно прокручивать бесконечно при прокрутке вверх, надеюсь, это поможет.

function App() {
  const [records, setRecords] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = async()=>{
    const fetchedRecords = await fetchRecords();
    const newRecords = fetchedRecords.concat(records);
    setRecords(newRecords);
    setRefreshing(false);
  }

  return (
    <FlatList
        onRefresh={onRefresh}
        refreshing={refreshing}
        keyExtractor={item => item.id}
        data={records}
        renderItem={({ item }) => Item(item)}
    ></FlatList>

  );
}