React Pokedex应用重复渲染、Key错误及移除async/await求助

问题1：重复渲染的修复 #

• 原代码在forEach循环中每次获取单只宝可梦详情后就调用setAllPokemon，导致多次状态更新，触发重复渲染。
• 同时直接修改状态数组allPokemon.push(data)是错误操作，React状态必须通过setState方法更新，直接修改无法触发正确的渲染流程。
• 修复方案：通过Promise.all批量获取所有宝可梦详情，待所有请求完成后一次性更新状态，大幅减少渲染次数。

问题2：缺失唯一key的修复 #

• React列表渲染时，必须为每个子元素提供唯一的key属性，帮助React高效识别元素变化，否则会触发控制台警告。
• 修复方案：在map渲染<li>元素时，添加key={pokemon.name}（或pokemon.id，二者都是唯一标识）。

问题3：移除async/await，改用Promise链式调用 #

• 将原异步逻辑替换为fetch的then方法链式处理，完全移除async/await语法。

修正后的完整代码 #

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [allPokemon, setAllPokemon] = useState([]);
  const [loadMore, setLoadMore] = useState('https://pokeapi.co/api/v2/pokemon?limit=151');

  const getAllPokemon = () => {
    fetch(loadMore)
      .then(response => response.json())
      .then(data => {
        setLoadMore(data.next);
        // 批量生成所有宝可梦详情的请求Promise
        const detailPromises = data.results.map(pokemon => 
          fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`).then(res => res.json())
        );
        // 所有请求完成后一次性合并更新状态
        Promise.all(detailPromises)
          .then(pokemonDetails => {
            setAllPokemon(currentList => [...currentList, ...pokemonDetails]);
          });
      });
  };

  useEffect(() => {
    getAllPokemon();
  }, []);

  return (
    <>
      <div className="app-container">
        <h1>POKEDEX-APP</h1>
        <div className='pokemon-container'>
          <div className='all-containers'>
            {allPokemon.map(pokemon => (
              <li key={pokemon.name}>{pokemon.name}</li>
            ))}
          </div>
          {/* 补充绑定点击事件，实现加载更多功能 */}
          <button className='load-more' onClick={getAllPokemon}>Load More</button>
        </div>
      </div>
    </>
  );
}

export default App;

额外说明：

1. 批量请求使用Promise.all确保所有详情数据就绪后再更新状态，避免多次触发组件渲染。
2. 完全移除了直接修改状态数组的操作，严格遵循React状态更新规范。
3. 补充了Load More按钮的点击事件绑定，实现预期的加载更多功能（原代码未绑定该事件）。

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