React中setState回调内Spread operator的用法疑问求助

你疑惑的这行代码：

setAllPokemons((currentList) => [...currentList, data]);

可以拆成两部分理解：

1. useState的回调式更新 #

setAllPokemons传入的是一个回调函数，参数currentList是React当前持有的allPokemons状态的最新值。当新状态依赖旧状态时，必须用这种回调形式——因为React的状态更新是异步批量的，直接引用allPokemons可能拿到的是更新前的旧值。

2. 扩展运算符(...)的数组展开用法 #

[...currentList, data]是用扩展运算符创建一个全新的数组：

• ...currentList会把原数组currentList里的每一个元素都“展开”到新数组中
• 再把新获取到的data（单个宝可梦数据）添加到新数组的末尾

这么做的核心原因是React状态的不可变性要求：你不能直接修改原状态数组（比如用currentList.push(data)），因为React是通过对比状态的引用变化来判断是否需要重新渲染的。直接修改原数组的话，引用没变，React检测不到状态更新，就不会重新渲染组件。用扩展运算符创建新数组，能保证状态引用更新，触发正确的渲染。

顺便说下原代码里的几个问题 #

1. forEach里用async/await无效：forEach不会等待异步函数执行完成，会导致所有请求同时发起，且无法保证状态更新的顺序。
2. await allPokemons.sort((a, b) => a.id - b.id);完全没用：
   • allPokemons是React状态，更新是异步的，这里拿到的大概率是旧值
   • sort会直接修改原数组，违反不可变性原则
   • 就算排序了，也不会同步到状态里

改进思路 #

可以用Promise.all批量处理所有宝可梦的请求，然后一次性排序并更新状态，性能更优：

const getAllPokemons = async () => {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=649&offset=0');
  const data = await res.json();

  // 批量创建请求Promise
  const pokemonPromises = data.results.map(async (pokemon) => {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
    return res.json();
  });

  // 等待所有请求完成，得到所有宝可梦数据
  const allPokemonData = await Promise.all(pokemonPromises);
  // 排序后更新状态
  setAllPokemons(allPokemonData.sort((a, b) => a.id - b.id));
};

深入学习方向 #

• JavaScript扩展运算符：重点学习它在数组、对象、函数参数中的多种用法，这是JS处理不可变数据的核心工具之一。
• React状态不可变性：掌握数组、对象状态的正确更新方式，明白为什么直接修改原状态会导致渲染异常。
• 异步操作与React状态：熟练使用Promise.all、async/await，避免循环中滥用异步导致的状态更新混乱。

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