Saya baru mengenal Bereaksi. Perulangan for digunakan untuk mengambil data dari url dengan id yang berbeda. Objek dari data berisi kunci yang sama dan nilai yang berbeda. Yang ingin saya lakukan adalah saya ingin menyimpan data ini ...

-1
ewef 6 April 2021, 02:33

1 menjawab

Jawaban Terbaik

axios.get tidak sinkron dan pernyataan console.log dieksekusi sebelum janji diselesaikan. Saya akan merekomendasikan membaca ini jawaban untuk mendapatkan pemahaman yang lebih baik.

Anda dapat membuat larik janji dan menunggunya menggunakan await Promise.all(...) untuk mengambil semua respons dan kemudian memanggil setData dengan status baru. Anda juga harus mengatur status awal ke array kosong.

const [data, setData] = useState([])

useEffect(() => {
  const fetchData = async () => {
    const ids = [1, 2, 3]
    const responses = await Promise.all(
      ids.map((id) => axios.get(`http://myURL/${id}`))
    )
    setData(responses.map((res) => res.data))
  }

  fetchData()
}, [])

Jika Anda menyiapkan eslint-plugin-react-hooks< /a>, itu akan menampilkan peringatan untuk menambahkan setData ke array dependensi karena efeknya bergantung padanya. Tidak apa-apa untuk menambahkannya karena referensi fungsi tidak akan berubah saat dirender ulang.

useEffect(() => {
  const fetchData = async () => {
    const ids = [1, 2, 3]
    const responses = await Promise.all(
      ids.map((id) => axios.get(`http://myURL/${id}`))
    )
    setData(responses.map((res) => res.data))
  }

  fetchData()
}, [setData])
1
Arun Kumar Mohan 5 April 2021, 23:54