Реагировать на собственную загрузку данных при нажатии кнопки

Question

Мне интересно, чтобы мой QuestionList.js компонент загружал данные при нажатии кнопки, однако я не хочу, чтобы он загружал все данные из API, только один объект на экран из этого массива из 10 объектов.

Я считаю, что у меня есть проблема порядка операций, и мне нужна помощь в ее решении.

Я знаю, как извлечь данные из API, используя axios и componentWIllMount(), которые будут извлекать мои данные в момент загрузки приложения, но я не уверен, что это то, что я хочу сделать, так как его тест применение.

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

Или я все об этом думаю неправильно? Должен ли я продолжить эту конфигурацию:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

class QuestionList extends Component {
  componentWillMount() {
    axios
      .get('https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean')
      .then(response => console.log(response));
  }

  render() {
    return (
      <View>
        <Text>Question List!!!</Text>
      </View>
    );
  }
}

export default QuestionList;

, который работает, и затем он загружается второй раз, когда пользователь нажимает кнопку, и тогда он действительно рендерится на экран?

Должен ли я даже использовать метод жизненного цикла componentWillMount(), если пользователю не нужны данные до нажатия кнопки?

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

Answer 1

Удобный для пользователя процесс создания готовых данных перед тем, как пользователь запросит их просмотр. Таким образом, пользователю не нужно будет ждать загрузки данных при каждом изменении экрана.

Если ваши данные большие, то запрос только данных следующих экранов более логичен. Таким образом, пользователю не придется ждать загрузки данных, и приложение будет готово раньше, чем оно запустится. Например, загрузка первых 2 элементов при загрузке приложения и загрузка третьего элемента при переходе пользователя ко второму элементу, загрузка четвертого элемента по третьему и т. Д.

Если ваши данные невелики и запрос выполняется достаточно быстро, то их получение за один раз приведет к меньшему количеству запросов к серверу и будет иметь большую производительность, требующую меньшего количества переключателей и т. Д.

Это зависит от требований вашего приложения и вашего решения