能否遍历Iterator？求React中遍历Iterator的更简便实现方案

你的代码通过useReducer管理Iterator状态来切换Pokemon，但其实可以用更直观的useState方案实现，不需要维护复杂的reducer逻辑，同时避免Iterator的隐式状态问题。

简化方案一：数组+索引管理状态 #

直接存储Pokemon数组和当前索引，通过索引切换元素，逻辑清晰易懂：

import { useState, useEffect } from 'react';

// 组件内代码
const [pokemonList, setPokemonList] = useState([]);
const [currentIndex, setCurrentIndex] = useState(0);

// 直接计算当前Pokemon，无需单独维护状态
const currentPokemon = pokemonList[currentIndex] || [];

useEffect(() => {
  fetch("/missionDay")
    .then(res => res.json())
    .then(r => {
      const list = r.message.map(id => Pokemon.find(pok => pok.id === id));
      setPokemonList(list);
    })
    .catch(err => console.log(err));
}, []);

// 切换到下一个Pokemon的函数
const changePokemon = () => {
  // 遍历到末尾后循环回到开头
  setCurrentIndex(prevIndex => (prevIndex + 1) % pokemonList.length);
};

简化方案二：仅维护当前Pokemon和剩余列表 #

如果不需要保留完整历史列表，可采用这种方式，每次切换后更新剩余列表：

import { useState, useEffect } from 'react';

// 组件内代码
const [currentPokemon, setCurrentPokemon] = useState([]);
const [remainingPokemon, setRemainingPokemon] = useState([]);

useEffect(() => {
  fetch("/missionDay")
    .then(res => res.json())
    .then(r => {
      const list = r.message.map(id => Pokemon.find(pok => pok.id === id));
      setCurrentPokemon(list[0] || []);
      setRemainingPokemon(list.slice(1));
    })
    .catch(err => console.log(err));
}, []);

const changePokemon = () => {
  if (remainingPokemon.length === 0) {
    // 处理遍历完成的情况，比如重置或提示
    return;
  }
  setCurrentPokemon(remainingPokemon[0]);
  setRemainingPokemon(prev => prev.slice(1));
};

方案优势说明 #

• 状态透明：数组、索引或剩余列表的状态一目了然，比Iterator的隐式状态更易调试维护
• 避免Iterator局限：Iterator只能单向遍历一次，无法复用；数组则可随时重置、跳转索引
• 代码更精简：无需编写reducer和dispatch逻辑，直接用useState更新函数完成状态切换
• 边界处理便捷：能轻松处理遍历到末尾的情况（循环、重置、提示等），原代码未处理Iterator遍历完成后next().value为undefined的问题

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