React中如何实现一次仅渲染数组中的单个闪卡？

要实现一次只显示一张闪卡，你需要用组件状态跟踪当前展示的卡片索引，然后仅渲染该索引对应的卡片即可，具体实现步骤如下：

1. 添加状态跟踪当前卡片索引
   在组件的构造函数中初始化状态，用来记录当前显示的卡片位置：

constructor(props) {
  super(props);
  this.state = {
    currentCardIndex: 0 // 默认显示第一张卡片
  };
}

2. 编写卡片切换逻辑
   实现切换上一张/下一张卡片的方法，同时处理边界情况避免索引越界：

// 切换到下一张卡片
handleNextCard = () => {
  if (this.state.currentCardIndex < this.props.cards.length - 1) {
    this.setState(prevState => ({
      currentCardIndex: prevState.currentCardIndex + 1
    }));
  }
};

// 切换到上一张卡片
handlePrevCard = () => {
  if (this.state.currentCardIndex > 0) {
    this.setState(prevState => ({
      currentCardIndex: prevState.currentCardIndex - 1
    }));
  }
};

3. 修改渲染逻辑，仅显示当前卡片
   不再用map遍历所有卡片，直接取出当前索引对应的卡片渲染，同时添加切换按钮：

render() {
  const { cards } = this.props;
  const { currentCardIndex } = this.state;

  // 处理无卡片的空状态
  if (cards.length === 0) {
    return <p>还没有创建任何闪卡，请先去编辑页添加</p>;
  }

  const currentCard = cards[currentCardIndex];

  return (
    <div className="card-container">
      <ul>
        <li key={currentCardIndex}>{currentCard.front}</li>
      </ul>
      <div className="card-controls">
        <button 
          onClick={this.handlePrevCard} 
          disabled={currentCardIndex === 0}
        >
          上一张
        </button>
        <button 
          onClick={this.handleNextCard} 
          disabled={currentCardIndex === cards.length - 1}
        >
          下一张
        </button>
      </div>
    </div>
  );
}

关键说明 #

• 用currentCardIndex状态控制显示哪张卡片，每次修改状态会触发组件重新渲染，展示对应卡片。
• 按钮的disabled属性防止用户点击无效切换操作（比如在第一张时无法点击“上一张”）。
• 增加空状态处理，避免数组为空时出现报错。

内容的提问来源于stack exchange，提问作者Tricia H.