Saya memiliki komponen yang menggunakan history.push untuk menavigasi URL. Masalahnya adalah salah satu jalur URL bergantung pada parameter penelusuran di URL untuk merender bagian komponen. Ini berfungsi dengan baik ketika pengguna awalnya menavigasi ke url, tetapi ketika mereka memperbaruinya saat berada di dalam jalur itu, itu tidak berfungsi. Berikut contohnya:

App.js

<Router>
   <Route path="/jobs" component={Jobs} />
</Router>

Url untuk pekerjaan akan berisi ID pekerjaan, yang digunakan untuk mengambil data dari backend - mis: /jobs?id=6583ghawo90. Dengan id itu saya membuat get request di dalam componentDidMount() komponen Pekerjaan untuk mengisi halaman. Di dalam komponen Pekerjaan, pengguna dapat menavigasi ke pekerjaan baru, yang memperbarui url melalui this.props.history.push(`/jobs?id=${newjob.id}`). Masalahnya adalah, ketika pengguna menavigasi ke URL yang diperbarui, komponen tidak memanggil componentDidMount() sehingga tidak meminta data baru. Saya dapat memperbaikinya dengan memanggil this.componentDidMount() secara manual, tetapi ini tidak berfungsi jika pengguna menekan tombol kembali di browser mereka.

Apakah ada yang bisa saya lakukan untuk memperbaiki masalah ini?

0
Djaenike 15 Mei 2020, 18:05

1 menjawab

Jawaban Terbaik

Anda seharusnya tidak menggunakan componentDidMount tetapi componentDidUpdate:

componentDidUpdate(prevProps) {
  // compare previous jobId and current jobId
  // refetch data if needed
}

Saya sarankan Anda menggunakan kait jika Anda berada di awal proses pengembangan.

1
snaksa 15 Mei 2020, 15:39