按下按钮时响应本机加载数据

Question

我有兴趣让我的 QuestionList.js 组件在按下按钮时加载数据，但是我不希望它从 api 加载所有数据，每个屏幕只加载一个对象来自这个包含 10 个对象的数组。

我想我这里有一个操作顺序问题需要一些帮助来解决。

我知道如何使用 axios 和 componentWIllMount() 从 API 获取数据，这将在应用程序启动时获取我的数据，但我不确定这是否这是我想做的，因为它是一个测验应用程序。

所以我只想在用户按下按钮时获取这个对象数组。

还是我的想法全错了？我应该继续使用此配置吗：

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 个项目，在用户导航到第二个项目时加载第三个项目，在第三个项目上加载第四个项目，依此类推。

如果您的数据不大并且请求完成得相当快，那么一次获取它们将导致对服务器的请求更少，并且性能更高，需要更少的 bandwitch 等。

这取决于您的应用要求和您的决定

按下按钮时响应本机加载数据

React Native Loading data when button is pressed

javascript

lifecycle

react-native

axios