Javascript 按下按钮时对本机加载数据作出反应

我很想让我的

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;

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
从“axios”导入axios；
类问题列表扩展组件{
组件willmount（）{
axios
.get（'https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean')
.then（response=>console.log（response））；
}
render（）{
返回(
问题列表！！！
);
}
}
导出默认问题列表；

当用户按下按钮时，哪一个正在工作，然后第二次加载它，然后它实际呈现到屏幕上

如果用户在按下按钮之前不需要数据，我是否应该使用

componentWillMount（）

lifecycle方法

---

请帮助。

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

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

如果您的数据不大，并且请求完成得相当快，那么一次性获得这些数据将减少对服务器的请求，并具有更高的性能，需要更少的带宽开关等

---

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

感谢您的帮助。从您分享的内容来看，我似乎可以实现

componentWillMount（）

在应用程序启动时从API加载数据，然后在用户实际准备好查看问题并回答问题时使用一个按钮。@Ale

componentWillMount

生命周期方法在react的未来版本中将被弃用，因此如果您正在创建新的应用程序，您应该尝试实现新版本的方法。你可以阅读更多关于他们的文章