Saya punya masalah dengan bereaksi dan usestate.

Saya mencoba mengunduh semua karakter dari Star Wars API. Saya menggunakan aksios untuk ini, jadi kode ini hanya untuk mengimpor instance AXIOS:

import { instance } from 'api/getCharacters';

Anda dapat melihat di sampel kode bahwa saya memiliki tombol yang menjalankan getcharacters async yang mengunduh 10 karakter pada panggilan pertama dan 5 karakter Di semua panggilan selanjutnya (kecuali panggilan terakhir). Saya menyimpan semua karakter JSON ke karakterarray . Anda juga dapat melihat bahwa saya melewati variabel state saya yang menyimpan karakter tersebut ke komponen karakter . Maka saya hanya memetakan array karakter, tapi itu tidak penting. Masalah saya adalah - bagaimana saya bisa memperbarui status menggunakan setcharacters Fungsi dengan status sebelumnya? Saya tahu bahwa saya harus melakukan sesuatu seperti ini:

setCharacters([...characters, charactersArray])

Bisakah Anda memberi tahu saya jika saya tidak salah dan menunjukkan kepada saya di mana dalam kode saya, saya harus melakukan ekspresi di atas?

sampel kode :

import CharactersList from 'components/CharactersList/CharactersList';
import { Button } from 'components/Button/Button';
import { GlobalStyle } from 'styles/GlobalStyle';
import { Wrapper } from './Root.styles';
import { useState } from 'react';
import { instance } from 'api/getCharacters';

const Root = () => {
  const [characters, setCharacters] = useState([]);
  const charactersArray = [];
  const getCharacters = async () => {
    const loadedPeople = charactersArray.length;
    const maxPeople = 82;
    const perPage =
      loadedPeople === 80
        ? 2
        : loadedPeople >= maxPeople
        ? 0
        : loadedPeople < 10
        ? 10
        : 5;
    for (let index = loadedPeople; index < loadedPeople + perPage; index++) {
      const character = await instance.get(`${index + 1}`).catch((error) => {
        console.log(error);
        return error;
      });
      charactersArray.push(character.data);
    }
    console.log(charactersArray);
  };
  return (
    <Wrapper>
      <Button onClick={getCharacters}>Fetch</Button>
      <GlobalStyle />
      <CharactersList data={characters} />
    </Wrapper>
  );
};

export default Root;

Terima kasih

0
mdzialo 4 April 2021, 23:22

1 menjawab

Jawaban Terbaik

Pertama-tama, ikuti prinsip kode bersih.

Dan instance bukan kata kunci yang dikenal untuk namespace API. E.g: Anda dapat menggunakan api().get('...') atau ApiCharachters.list()

Saya tidak yakin tentang fungsi panggilan balik async Anda. Baca beberapa artikel sebelum menggunakannya.

Dan saya pikir itu bisa lebih baik seperti ini:

const MAX_PEOPLE = 82;

function calcPerPage(loaded) {
  if (loaded === 80) return 2;
  else if (loaded >= MAX_PEOPLE) return 0;

  return loaded < 10 ? 10 : 5;
}

const Root = () => {
  const [characters, setCharacters] = useState([]);

  const handleGetCharacters = async () => {
    const loadedPeople = characters.length;
    const perPage = calcPerPage(loadedPeople);

    for (let i = loadedPeople; i < loadedPeople + perPage; i++) {
      const character = await instance.get(`${i + 1}`).catch((error) => {
        console.log(error);
        return error;
      });

      setCharacters((prev) => [...prev, character]);
    }

    console.log(characters);
  };

  return (
    <Wrapper>
      <Button onClick={handleGetCharacters}>Fetch</Button>
      <GlobalStyle />
      <CharactersList data={characters} />
    </Wrapper>
  );
};

0
Daniel Dez 4 April 2021, 21:48