时间戳

首页 > 解决方案 > 按下按钮时反应本机加载数据

javascript - 按下按钮时反应本机加载数据

问题描述

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

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

我确实知道如何使用 API 从 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()如果用户在按下按钮之前不需要数据，我什至应该使用生命周期方法吗？

请帮忙。

标签： javascriptreact-nativeaxioslifecycle

解决方案

用户体验友好的服务将在用户请求查看之前准备好所需的数据。这样用户就不必在每次屏幕更改时等待数据加载。

如果您的数据很大，那么只请求下一个屏幕数据更合乎逻辑。这样用户就不必等待数据加载，并且应用程序将在启动时更快地准备好。例如，当应用程序加载时加载前 2 个项目，当用户导航到第二个项目时加载第三个项目，在第三个项目上加载第四个项目，依此类推。

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

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

推荐阅读