Skip to content

Commit 2d2982b

Browse files
authored
docs: translate useActionState (#711)
1 parent 630b493 commit 2d2982b

File tree

1 file changed

+35
-35
lines changed

1 file changed

+35
-35
lines changed

src/content/reference/react/useActionState.md

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ canary: true
55

66
<Canary>
77

8-
The `useActionState` Hook is currently only available in React's Canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/rsc/use-client) to get the full benefit of `useActionState`.
8+
Hook `useActionState` saat ini hanya tersedia di kanal Canary dan eksperimental React. Pelajari lebih lanjut tentang [saluran rilis disini](/community/versioning-policy#all-release-channels). Selain itu, Anda perlu menggunakan framework yang mendukung [React Server Components](/reference/rsc/use-client) untuk mendapatkan manfaat penuh dari `useActionState`.
99

1010
</Canary>
1111

1212
<Note>
1313

14-
In earlier React Canary versions, this API was part of React DOM and called `useFormState`.
14+
Pada versi React Canary sebelumnya, API ini merupakan bagian dari React DOM dan disebut `useFormState`.
1515

1616
</Note>
1717

1818
<Intro>
1919

20-
`useActionState` is a Hook that allows you to update state based on the result of a form action.
20+
`useActionState` adalah sebuah Hook yang memungkinkan Anda memperbarui *state* berdasarkan hasil dari aksi sebuah form.
2121

2222
```js
2323
const [state, formAction] = useActionState(fn, initialState, permalink?);
@@ -29,13 +29,13 @@ const [state, formAction] = useActionState(fn, initialState, permalink?);
2929
3030
---
3131
32-
## Reference {/*reference*/}
32+
## Referensi {/*reference*/}
3333
3434
### `useActionState(action, initialState, permalink?)` {/*useactionstate*/}
3535
3636
{/* TODO T164397693: link to actions documentation once it exists */}
3737
38-
Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided.
38+
Panggil `useActionState` di tingkat atas komponen Anda untuk membuat *state* komponen yang diperbarui [saat aksi form dijalankan](/reference/react-dom/components/form). Anda mengoper sebuah fungsi aksi form yang sudah ada serta *state* awal ke `useActionState`, dan fungsi ini akan mengembalikan aksi baru yang Anda gunakan dalam form, bersama dengan *state* form terbaru. *State* form terbaru juga akan dioper ke fungsi yang Anda sediakan.
3939
4040
```js
4141
import { useActionState } from "react";
@@ -55,39 +55,39 @@ function StatefulForm({}) {
5555
}
5656
```
5757
58-
The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
58+
*State* form adalah nilai yang dikembalikan oleh aksi saat form terakhir kali disubmit. Jika form belum disubmit, itu adalah *state* awal yang Anda lewatkan.
5959
60-
If used with a Server Action, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
60+
Jika digunakan dengan *Server Action*, `useActionState` memungkinkan respon dari server setelah mengirimkan form untuk ditampilkan bahkan sebelum proses hidrasi selesai.
6161
62-
[See more examples below.](#usage)
62+
[Lihat contoh lainnya di bawah ini.](#usage)
6363
64-
#### Parameters {/*parameters*/}
64+
#### Parameter {/*parameters*/}
6565
66-
* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
67-
* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
68-
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server action](/reference/rsc/use-server) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
66+
* `fn`: Fungsi yang akan dipanggil ketika form dikirimkan atau tombol ditekan. Ketika fungsi dipanggil, fungsi akan menerima keadaan sebelumnya dari form (awalnya `initialState` yang Anda berikan, kemudian nilai kembalinya sebelumnya) sebagai argumen awal, diikuti dengan argumen yang biasanya diterima oleh aksi form.
67+
* `initialState`: Nilai yang Anda inginkan untuk *state* awalnya. Nilai ini dapat berupa nilai yang dapat diurutkan. Argumen ini diabaikan setelah aksi pertama kali dipanggil.
68+
* **opsional** `permalink`: String yang berisi URL halaman unik yang dimodifikasi oleh form ini. Untuk digunakan pada halaman dengan konten dinamis (misalnya: feeddalam hubungannya dengan peningkatan progresif: jika `fn` adalah [aksi server](/reference/rsc/use-server) dan form dikirimkan sebelum bundel JavaScript dimuat, browser akan menavigasi ke URL permalink yang ditentukan, bukan ke URL halaman yang sekarang. Pastikan bahwa komponen form yang sama di-render di halaman tujuan (termasuk action `fn` dan `permalink` yang sama) sehingga React tahu bagaimana cara meneruskan *state*. Setelah form di-hidrasi, parameter ini tidak berpengaruh.
6969
7070
{/* TODO T164397693: link to serializable values docs once it exists */}
7171
72-
#### Returns {/*returns*/}
72+
#### Kembalian {/*returns*/}
7373
74-
`useActionState` returns an array with exactly two values:
74+
`useActionState` mengembalikan sebuah array dengan tepat dua nilai:
7575
76-
1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
77-
2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.
76+
1. Keadaan saat ini. Selama render pertama, ini akan cocok dengan `initialState` yang telah Anda berikan. Setelah aksi dipanggil, ia akan cocok dengan nilai yang dikembalikan oleh aksi.
77+
2. Tindakan baru yang dapat Anda berikan sebagai prop `action` ke komponent `form` Anda atau prop`formAction` ke komponen `button` mana pun di dalam form.
7878
79-
#### Caveats {/*caveats*/}
79+
#### Perhatian {/*caveats*/}
8080
81-
* When used with a framework that supports React Server Components, `useActionState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
82-
* The function passed to `useActionState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useActionState`.
81+
* Ketika digunakan dengan *framework* yang mendukung Komponen Server React, `useActionState` memungkinkan Anda membuat form menjadi interaktif sebelum JavaScript dieksekusi di klien. Ketika digunakan tanpa Komponen Server, ini setara dengan state lokal komponen.
82+
* Fungsi yang dioper ke `useActionState` menerima argumen tambahan, yaitu *state* sebelumnya atau awal, sebagai argumen pertamanya. Hal ini membuat tanda tangannya berbeda dibandingkan jika digunakan secara langsung sebagai aksi form tanpa menggunakan `useActionState`.
8383
8484
---
8585
86-
## Usage {/*usage*/}
86+
## Penggunaan {/*usage*/}
8787
88-
### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
88+
### Menggunakan informasi yang dikembalikan oleh tindakan form {/*using-information-returned-by-a-form-action*/}
8989
90-
Call `useActionState` at the top level of your component to access the return value of an action from the last time a form was submitted.
90+
Panggil `useActionState` di tingkat atas komponen Anda untuk mengakses nilai balik dari suatu tindakan dari saat terakhir kali form dikirimkan.
9191
9292
```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
9393
import { useActionState } from 'react';
@@ -104,14 +104,14 @@ function MyComponent() {
104104
}
105105
```
106106
107-
`useActionState` returns an array with exactly two items:
107+
`useActionState` mengembalikan sebuah array dengan tepat dua:
108108
109-
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
110-
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
109+
1. <CodeStep step={1}>State saat ini</CodeStep> dari form, yang pada awalnya diatur ke <CodeStep step={4}>state awal</CodeStep> yang Anda berikan, dan setelah form dikirimkan, diatur ke nilai balik dari <CodeStep step={3}>aksi</CodeStep> yang Anda berikan.
110+
2. <CodeStep step={2}>Aksi baru</CodeStep> yang Anda oper ke`<form>` sebagai properti `action`-nya.
111111
112-
When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
112+
Ketika form dikirimkan, fungsi <CodeStep step={3}>aksi</CodeStep> yang Anda berikan akan dipanggil. Nilai baliknya akan menjadi <CodeStep step={1}>state saat ini</CodeStep> yang baru dari form.
113113
114-
The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useActionState` had not been used.
114+
<CodeStep step={3}>Aksi</CodeStep> yang Anda sediakan juga akan menerima argumen pertama yang baru, yaitu <CodeStep step={1}>state saat ini</CodeStep> dari form. Saat form dikirimkan untuk pertama kalinya, nilai akan berupa <CodeStep step={4}>state awal</CodeStep> yang Anda berikan, Pada pengiriman berikutnya, nilai ini akan menjadi hasil dari panggilan aksi terakhir. Sisanya dari argumen tetap sama seperti jika `useActionState` tidak digunakan.
115115
116116
```js [[3, 1, "action"], [1, 1, "currentState"]]
117117
function action(currentState, formData) {
@@ -120,11 +120,11 @@ function action(currentState, formData) {
120120
}
121121
```
122122
123-
<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
123+
<Recipes titleText="Menampilkan informasi setelah mengirimkan form" titleId="display-information-after-submitting-a-form">
124124
125-
#### Display form errors {/*display-form-errors*/}
125+
#### Menampilkan kesalahan form {/*display-form-errors*/}
126126
127-
To display messages such as an error message or toast that's returned by a Server Action, wrap the action in a call to `useActionState`.
127+
Untuk menampilkan pesan seperti pesan kesalahan atau toast yang dikembalikan oleh Aksi Server, bungkus aksi tersebut dengan panggilan ke `useActionState`.
128128
129129
<Sandpack>
130130
@@ -194,9 +194,9 @@ form button {
194194
195195
<Solution />
196196
197-
#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
197+
#### Menampilkan informasi terstruktur setelah mengirimkan form {/*display-structured-information-after-submitting-a-form*/}
198198
199-
The return value from a Server Action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
199+
Nilai yang dikembalikan dari Server Action dapat berupa nilai yang dapat diserialkan. Sebagai contoh, nilai tersebut dapat berupa object yang mencakup boolean yang menunjukan apakah aksi berhasil, pesan kesalahan, atau informasi yang diperbarui.
200200
201201
<Sandpack>
202202
@@ -283,11 +283,11 @@ form button {
283283
284284
</Recipes>
285285
286-
## Troubleshooting {/*troubleshooting*/}
286+
## Pemecahan masalah {/*troubleshooting*/}
287287
288-
### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
288+
### Aksi saya tidak lagi dapat membaca data form yang dikirimkan {/*my-action-can-no-longer-read-the-submitted-form-data*/}
289289
290-
When you wrap an action with `useActionState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
290+
Ketika Anda membungkus sebuah aksi dengan `useActionState`, ia mendapatkan argumen tambahan *sebagai argumen pertama*. Oleh karena itu, data form yang dikirimkan menjadi argumen *kedua* alih-alih argumen pertama seperti biasanya. Argumen pertama baru yang ditambahkan adalah state saat ini dari form.
291291
292292
```js
293293
function action(currentState, formData) {

0 commit comments

Comments
 (0)