Блог

в функции ‘fetchData’ я извлекаю начальный URL, который содержит список имен и URL-адресов. Эти URL-адреса будут предоставлять мне фактические данные, которые мне нужны, конечно, я использую возвращаемые данные initialUrl.
— Я отправляю эти имена и URL-адреса, чтобы снова использовать URL-адреса, и сопоставляю эти данные в функции loadingPokemon. В этой функции я просматриваю входящие данные, получаю URL-адреса, извлекаю их с помощью axios и устанавливаю выбранные данные в ‘pokeDatasDatas’ с помощью оператора распространения, console.в журнале ниже приведены нужные мне данные (всего 20, увеличивается с 0 до 20 на каждом шаге)
— но делает это после первоначального рендеринга. Я не смог установить свое состояние «setPokemonData» с этими данными.
Также на экране отображается пустой белый экран…
Я знаю, что имена моих переменных немного запутаны, извините за это…

Вот мои переменные состояния;

 const [pokemonData, setPokemonData] = useState([]);
const [nextUrl, setNextUrl] = useState('');
const [prevUrl, setPrevUrl] = useState('');
const [loading, setLoading] = useState(false);
const initialUrl = 'https://pokeapi.co/api/v2/pokemon/';
  

Итак, вот мой эффект использования ;

 useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    let response = await axios.get(initialUrl);
    setNextUrl(response.next);
    setPrevUrl(response.previous);
    //console.log(response.data.results); name ve url veriyor
    //setPokemonData(response.data.results);
    let a = await loadingPokemon(response.data.results);
    console.log(a);
    setPokemonData(a);
    setLoading(false);
    };

    fetchData();
    }, []);
  

и моя функция loadingPokemon

 const loadingPokemon = async (datas) => {
  let pokeDatasDatas = [];
  const pokemons = await datas.map(async (data) => {
    let pokemonRecords = await data.url;

    let pokeDatas = await axios.get(pokemonRecords);
    pokeDatasDatas = [...pokeDatasDatas, pokeDatas.data];
    console.log(pokeDatasDatas);
  });
  console.log(pokeDatasDatas);
  //setPokemonData(pokeDatasDatas);
  return pokeDatasDatas;
};
  

Сначала я перенес функцию ‘loadingPokemon’ внутрь ‘useEffect’

После этого я создал 2 пустых массива, сначала я сопоставил входящие параметры (данные), чтобы получить только URL-адреса и создать из них новый массив. Потому что «данные» содержали 2 объекта; имя и URL. Я сопоставил и перенес все данные в «pokemonRecords» и создал новый массив. После этого мне понадобились фактические данные из каждого URL-адреса в ‘pokemonRecords’. Поэтому для каждой записи мне нужно извлекать данные из этого URL-адреса с помощью axios и помещать все возвращаемые данные в массив ‘pokemonDatas’, который теперь содержит данные каждого URL-адреса.

   const loadingPokemon = async (datas) => {
   let pokemonRecords = [];
   let pokemonDatas = [];
   datas.map((data) => {
    pokemonRecords.push(data.url);
   
   });
    

   pokemonRecords.forEach(async (record) => {
    let pokemonDatasDatas = await axios.get(record);

    console.log(pokemonDatasDatas.data);
    pokemonDatas.push(pokemonDatasDatas.data);
   });
    
   };