React Native技术问题：点击卡片如何循环渲染下一个Question组件？

我尝试点击卡片时循环渲染下一个Question组件，但当前方案无效。第一个Question显示正常，点击后控制台显示cardNum已更新，但界面并未切换到下一个cardNum——我推测这是因为组件没触发重新渲染。请问如何解决这个问题？

当前代码 #

let cardNum = 0
// renders each question
const renderQuestions = () => {
  for (cardNum; cardNum < todaysRevision.length;) {
    return (
      <Question key={todaysRevision[cardNum]} card={todaysRevision[cardNum]}/>
    )
  }
}

// Question const
const Question = (card: any) => {
  // if it is a new card, simply allow the student to learn it without being quizzed
    return(
      <View>
        {
          card.card.masteryLevel === 0 ?
          <TouchableOpacity style={styles.question} onPress={() => updateCardNum()}>
            <Text style={styles.newCard}>{card.card.chinese}</Text>
            <Text>{pinyin(card.card.chinese)}</Text>
            <Text>{card.card.english}</Text>
          </TouchableOpacity>
          :
          <Text/>
        }
      </View>
    )
}

// move to the next question
const updateCardNum = () => {
  cardNum++;
  console.log('new card: ' + cardNum)
  // setProgress(cardNum/todaysRevision.length);
}

解决方法 #

问题根源 #

你用普通变量cardNum存储当前卡片索引，React不会监听普通变量的变化，所以就算修改了cardNum的值，组件也不会触发重渲染，自然不会更新UI。

修复步骤 #

1. 改用React状态变量：用useState钩子管理cardNum，状态更新会自动触发组件重渲染。
2. 简化渲染逻辑：不需要循环，直接根据当前状态渲染对应卡片即可。

修改后的代码 #

import { useState } from 'react';

// 定义卡片类型，替代any
interface Card {
  masteryLevel: number;
  chinese: string;
  english: string;
}

interface QuestionProps {
  card: Card;
}

const YourComponent = () => {
  // 用useState管理当前卡片索引
  const [cardNum, setCardNum] = useState(0);
  // 假设todaysRevision是Card类型的数组
  const todaysRevision: Card[] = [];

  // 渲染当前卡片
  const renderCurrentQuestion = () => {
    if (cardNum < todaysRevision.length) {
      return (
        <Question 
          key={cardNum} // 用索引当key，或者用卡片唯一ID更稳妥
          card={todaysRevision[cardNum]}
        />
      );
    }
    return <Text>所有卡片复习完成！</Text>;
  };

  const Question = ({ card }: QuestionProps) => {
    return(
      <View>
        {
          card.masteryLevel === 0 ?
          <TouchableOpacity style={styles.question} onPress={updateCardNum}>
            <Text style={styles.newCard}>{card.chinese}</Text>
            <Text>{pinyin(card.chinese)}</Text>
            <Text>{card.english}</Text>
          </TouchableOpacity>
          :
          <Text/>
        }
      </View>
    );
  };

  // 更新卡片索引
  const updateCardNum = () => {
    // 用函数式更新确保拿到最新状态值
    setCardNum(prevNum => {
      const newNum = prevNum + 1;
      console.log('new card: ' + newNum);
      // setProgress(newNum/todaysRevision.length);
      return newNum;
    });
  };

  return (
    <View>
      {renderCurrentQuestion()}
    </View>
  );
};

关键说明 #

• useState是React函数组件的核心状态管理工具，状态更新会触发组件重新执行，从而更新UI。
• 函数式更新setCardNum(prev => prev + 1)可以避免状态更新依赖旧值的问题，确保每次更新都是基于最新的状态。
• 给Question组件定义明确的类型（替代any），可以提升代码可读性和类型安全性。

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