Skip to content

Commit 81f61e9

Browse files
committed
docs: challenges section
1 parent 00ca0fb commit 81f61e9

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

src/content/learn/queueing-a-series-of-state-updates.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -276,13 +276,13 @@ Jika Anda lebih suka kode yang lebih panjang, konvensi umum lainnya adalah mengu
276276

277277
<Challenges>
278278

279-
#### Fix a request counter {/*fix-a-request-counter*/}
279+
#### Perbaiki hitungan permintaan {/*fix-a-request-counter*/}
280280

281-
You're working on an art marketplace app that lets the user submit multiple orders for an art item at the same time. Each time the user presses the "Buy" button, the "Pending" counter should increase by one. After three seconds, the "Pending" counter should decrease, and the "Completed" counter should increase.
281+
Anda bekerja pada aplikasi pasar seni yang memungkinkan pengguna mengirimkan beberapa pesanan untuk item seni pada saat yang sama. Setiap kali pengguna menekan tombol "Buy", hitungan "Pending" harus bertambah satu. Setelah tiga detik, hitungan "Pending" harus berkurang, dan hitungan "Completed" harus bertambah.
282282

283-
However, the "Pending" counter does not behave as intended. When you press "Buy", it decreases to `-1` (which should not be possible!). And if you click fast twice, both counters seem to behave unpredictably.
283+
Akan tetapi, hitungan "Pending" tidak berperilaku seperti yang diharapkan. Ketika Anda menekan "Buy", ia berkurang menjadi `-1` (yang seharusnya tidak mungkin!). Dan jika Anda mengklik cepat dua kali, kedua hitungan tampaknya berperilaku diluar kendali.
284284

285-
Why does this happen? Fix both counters.
285+
Mengapa ini terjadi? Perbaiki kedua hitungan.
286286

287287
<Sandpack>
288288

@@ -326,7 +326,7 @@ function delay(ms) {
326326

327327
<Solution>
328328

329-
Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions:
329+
Di dalam *event handler* `handleClick`, nilai `pending` dan `completed` sesuai dengan apa yang mereka lakukan pada saat klik. Untuk *render* pertama, `pending` adalah `0` sehingga `setPending(pending - 1)` menjadi `setPending(-1)`, ini salah. Karena Anda ingin menambah atau mengurangi hitungan, bukan mengaturnya ke nilai konkret yang ditentukan selama klik, Anda dapat mengirimkan fungsi *updater*:
330330

331331
<Sandpack>
332332

@@ -368,23 +368,23 @@ function delay(ms) {
368368

369369
</Sandpack>
370370

371-
This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click.
371+
Ini memastikan bahwa ketika Anda menambah atau mengurangi hitungan, Anda melakukannya dalam kaitannya dengan *state* terbaru daripada *state* pada saat klik.
372372

373373
</Solution>
374374

375-
#### Implement the state queue yourself {/*implement-the-state-queue-yourself*/}
375+
#### Implementasikan antrean state sendiri {/*implement-the-state-queue-yourself*/}
376376

377-
In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds.
377+
Dalam tantangan ini, Anda akan mengimplementasikan kembali bagian kecil dari React dari awal! Ini tidak sesulit kedengarannya.
378378

379-
Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass.
379+
Gulir (*scroll*) melalui pratinjau (*preview*) *sandbox*. Perhatikan bahwa itu menunjukkan **empat kasus uji.** Mereka sesuai dengan contoh yang telah Anda lihat sebelumnya di halaman ini. Tugas Anda adalah mengimplementasikan fungsi `getFinalState` sehingga mengembalikan hasil yang benar untuk masing-masing kasus tersebut. Jika Anda mengimplementasikannya dengan benar, keempat tes harus lulus.
380380

381-
You will receive two arguments: `baseState` is the initial state (like `0`), and the `queue` is an array which contains a mix of numbers (like `5`) and updater functions (like `n => n + 1`) in the order they were added.
381+
Anda akan menerima dua argumen: `baseState` adalah *state* awal (seperti `0`), dan `queue` adalah array yang berisi campuran angka (seperti `5`) dan fungsi *updater* (seperti `n => n + 1`) sesuai dengan urutan mereka ditambahkan.
382382

383-
Your task is to return the final state, just like the tables on this page show!
383+
Tugas Anda adalah mengembalikan *state* akhir, seperti tabel pada halaman ini menunjukkan!
384384

385385
<Hint>
386386

387-
If you're feeling stuck, start with this code structure:
387+
Jika Anda merasa terjebak, mulailah dengan struktur kode ini:
388388

389389
```js
390390
export function getFinalState(baseState, queue) {
@@ -402,7 +402,7 @@ export function getFinalState(baseState, queue) {
402402
}
403403
```
404404

405-
Fill out the missing lines!
405+
Isi baris yang hilang!
406406

407407
</Hint>
408408

@@ -499,7 +499,7 @@ function TestCase({
499499

500500
<Solution>
501501

502-
This is the exact algorithm described on this page that React uses to calculate the final state:
502+
Ini merupakan algoritma paling tepat yang digunakan React untuk menghitung state akhir:
503503

504504
<Sandpack>
505505

@@ -600,7 +600,7 @@ function TestCase({
600600

601601
</Sandpack>
602602

603-
Now you know how this part of React works!
603+
Sekarang Anda tahu bagaimana bagian React ini bekerja!
604604

605605
</Solution>
606606

0 commit comments

Comments
 (0)