React Native：点击按钮加载单条API数据的实现疑问

嘿，我来帮你梳理清楚这个测验应用的问题～

先给结论：别用componentWillMount，把数据请求放在按钮点击事件里更合适！ #

componentWillMount其实已经被React官方标记为过时（不推荐使用）了，而且核心问题是：用户在点击按钮前根本不需要数据，提前请求完全是浪费网络资源和服务器带宽，完全没必要。

两种可行方案分析，结合测验场景推荐第一种 #

方案1：点击按钮时一次性请求全部10条数据，每次点击切换显示下一题

这是最适合测验应用的方案，原因如下：

• 测验题一般是固定内容，不需要实时更新，一次性请求能减少API调用次数（只发1次请求），减轻服务器压力
• 用户后续点击"下一题"时，不需要再等网络请求，响应更快，体验更流畅
• 10条数据的体积极小，完全不会有性能问题

代码示例（类组件版本）：

import React, { Component } from 'react';
import axios from 'axios';

class QuestionList extends Component {
  state = {
    questions: [], // 存储所有题目
    currentIndex: 0, // 当前显示的题目索引
    isLoading: false, // 加载状态
    hasError: false // 请求错误状态
  };

  handleNextQuestion = async () => {
    const { questions } = this.state;
    // 如果还没请求过数据，先发起请求
    if (questions.length === 0) {
      this.setState({ isLoading: true, hasError: false });
      try {
        const response = await axios.get('你的API接口地址');
        this.setState({
          questions: response.data,
          isLoading: false
        });
      } catch (error) {
        console.error('题目加载失败:', error);
        this.setState({ isLoading: false, hasError: true });
      }
    } else {
      // 已有数据，切换到下一题（如果到最后一题可以重置或禁用按钮）
      this.setState(prevState => ({
        currentIndex: prevState.currentIndex < prevState.questions.length - 1 
          ? prevState.currentIndex + 1 
          : 0 // 这里可以改成停止，比如保持最后一题，或者提示测验结束
      }));
    }
  };

  render() {
    const { questions, currentIndex, isLoading, hasError } = this.state;
    const currentQuestion = questions[currentIndex];

    return (
      <div className="question-container">
        {isLoading && <p>正在加载题目...</p>}
        {hasError && <p>题目加载失败，请重试</p>}
        {currentQuestion && (
          <div className="current-question">
            <h3>第{currentIndex + 1}题：{currentQuestion.title}</h3>
            <p>{currentQuestion.content}</p>
            {/* 这里渲染选项等内容，比如currentQuestion.options.map(...) */}
          </div>
        )}
        <button 
          onClick={this.handleNextQuestion} 
          disabled={isLoading}
        >
          {questions.length === 0 ? '开始测验' : '下一题'}
        </button>
      </div>
    );
  }
}

export default QuestionList;

方案2：每次点击按钮请求单条数据

这个方案适合题目需要实时生成/随机返回的场景，但缺点很明显：

• 每次点击都要发起网络请求，用户可能会感受到延迟
• 总共要发10次API请求，增加服务器负担
  如果你的测验题是固定的，完全没必要用这种方式。

补充：关于生命周期的选择 #

除了componentWillMount过时之外，即使是推荐的componentDidMount，在这里也不需要——因为用户主动触发（点击按钮）才需要数据，被动的挂载时请求不符合业务逻辑。

内容的提问来源于stack exchange，提问作者user8359832