Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: translate 'useActionState' #711

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: translate 'useActionState' #711

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab73c58
docs: translate 'useActionState'
arsyaadi Jun 30, 2024
fd7f919
Merge branch 'main' into docs/use-action-state
arsyaadi Jul 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 35 additions & 35 deletions src/content/reference/react/useActionState.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ canary: true

<Canary>

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`.
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`.

</Canary>

<Note>

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

</Note>

<Intro>

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

```js
const [state, formAction] = useActionState(fn, initialState, permalink?);
Expand All @@ -29,13 +29,13 @@ const [state, formAction] = useActionState(fn, initialState, permalink?);

---

## Reference {/*reference*/}
## Referensi {/*reference*/}

### `useActionState(action, initialState, permalink?)` {/*useactionstate*/}

{/* TODO T164397693: link to actions documentation once it exists */}

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.
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.

```js
import { useActionState } from "react";
Expand All @@ -55,39 +55,39 @@ function StatefulForm({}) {
}
```

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.
State form adalah nilai yang dikembalikan oleh aksi saat form terakhir kali disubmit. Jika form belum disubmit, itu adalah state awal yang Anda lewatkan.

If used with a Server Action, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
Jika digunakan dengan Aksi Server, `useActionState` memungkinkan respon dari server setelah mengirimkan form untuk ditampilkan bahkan sebelum proses hydrasi selesai.

[See more examples below.](#usage)
[Lihat contoh lainnya di bawah ini.](#usage)

#### Parameters {/*parameters*/}
#### Parameter {/*parameters*/}

* `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.
* `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.
* **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.
* `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.
* `initialState`: Nilai yang Anda inginkan untuk state awalnya. Nilai ini dapat berupa nilai yang dapat diurutkan. Argumen ini diabaikan setelah aksi pertama kali dipanggil.
* **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 ditentukanL, 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.

{/* TODO T164397693: link to serializable values docs once it exists */}

#### Returns {/*returns*/}
#### Pengembalian {/*returns*/}

`useActionState` returns an array with exactly two values:
`useActionState` mengembalikan sebuah array dengan tepat dua nilai:

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.
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.
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.
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.

#### Caveats {/*caveats*/}
#### Perhatian {/*caveats*/}

* 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.
* 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`.
* Ketika digunakan dengan framework yang mendukung React Server Components, `useActionState` memungkinkan Anda membuat form menjadi interaktif sebelum JavaScript dieksekusi di klien. Ketika digunakan tanpa Komponen Server, ini setara dengan state lokal komponen.
* 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`.

---

## Usage {/*usage*/}
## Penggunaan {/*usage*/}

### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
### Menggunakan informasi yang dikembalikan oleh tindakan form {/*using-information-returned-by-a-form-action*/}

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.
Panggil `useActionState` di tingkat atas komponen Anda untuk mengakses nilai balik dari suatu tindakan dari saat terakhir kali form dikirimkan.

```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
import { useActionState } from 'react';
Expand All @@ -104,14 +104,14 @@ function MyComponent() {
}
```

`useActionState` returns an array with exactly two items:
`useActionState` mengembalikan sebuah array dengan tepat dua:

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.
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
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.
2. <CodeStep step={2}>Aksi baru</CodeStep> yang Anda oper ke`<form>` sebagai properti `action`-nya.

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.
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.

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.
<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.

```js [[3, 1, "action"], [1, 1, "currentState"]]
function action(currentState, formData) {
Expand All @@ -120,11 +120,11 @@ function action(currentState, formData) {
}
```

<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
<Recipes titleText="Menampilkan informasi setelah mengirimkan form" titleId="display-information-after-submitting-a-form">

#### Display form errors {/*display-form-errors*/}
#### Menampilkan kesalahan form {/*display-form-errors*/}

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`.
Untuk menampilkan pesan seperti pesan kesalahan atau toast yang dikembalikan oleh Aksi Server, bungkus aksi tersebut dengan panggilan ke `useActionState`.

<Sandpack>

Expand Down Expand Up @@ -194,9 +194,9 @@ form button {

<Solution />

#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
#### Menampilkan informasi terstruktur setelah mengirimkan form {/*display-structured-information-after-submitting-a-form*/}

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.
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.

<Sandpack>

Expand Down Expand Up @@ -283,11 +283,11 @@ form button {

</Recipes>

## Troubleshooting {/*troubleshooting*/}
## Pemecahan masalah {/*troubleshooting*/}

### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
### Aksi saya tidak lagi dapat membaca data form yang dikirimkan {/*my-action-can-no-longer-read-the-submitted-form-data*/}

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.
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.

```js
function action(currentState, formData) {
Expand Down