Làm thế nào để hoàn thành vòng lặp rồi thực hiện dòng lệnh tiếp theo

[An_Danh11 (Ẩn Danh)]

Chào mọi người, cho mình hỏi là làm sao để hoàn thành vòng lặp rồi mới setState được.

Chuyện là useEffect chạy 2 lần do React.StrickMode và mình setState trong loop thì bị double. Phải gáng cho nó 1 list mới nhưng lúc này không nhận được dữ liệu gì cả.

À mới học TypeScript nên nhìn code hơi luộm thuộm.

Xin cảm ơn!

useEffect(() => {
    const pokemonList: PokemonType[] = [];
   
    const fetchPokemonApi = async () => {
        const params = {
            limit: 3,
            offet: 20
        }
        const call = () => {
            console.log(pokemonList);
        }
        const response: any = await pokemonApi.getAll(params);
       
        response.results.forEach(async (pokemon: PokemonType) => {
            const poke: any = await pokemonApi.getId(pokemon.name);
            pokemonList.push(poke);
            setPokemons((p) => [...p, poke]); // List State bị double
        });
       
        console.log(pokemonList); // pokemonList : []
        setPokemons(pokemonList);
    };
    fetchPokemonApi();
   
}, []);

[An_Danh11 (Ẩn Danh)]

Mình đã tìm hiểu kỹ về bất ồng bộ và xử lý nhưng khi setState vẫn bị bug là không render hết element, vẫn chưa biết lý do.

Nhưng mà mình đã xử lý đc là thay forEach thành vòng lặp for.

[baoo (ㅤ)]

Mình nghĩ bạn nên sử dụng Promise.all thay vì forEach để xử lý case này.

pokemonApi.getId chạy nhiều lần nhưng không phụ thuộc nhau vì vậy không cần await từng request mà cho hết vào Promise.all để gửi nhiều request “đồng thời” sau khi đã await pokemonApi.getAll