Rumah > hujung hadapan web > tutorial js > Bagaimanakah saya menambah elemen pada tatasusunan dalam React Hooks menggunakan useState?

Bagaimanakah saya menambah elemen pada tatasusunan dalam React Hooks menggunakan useState?

Linda Hamilton
Lepaskan: 2024-11-02 14:53:02
asal
291 orang telah melayarinya

How do I add elements to an array in React Hooks using useState?

Menolak Elemen ke dalam Tatasusunan dalam React Hooks (useState)

Apabila berurusan dengan tatasusunan keadaan dalam React Hooks, kaedah tradisional tidak lagi terpakai . Sebaliknya, useState menyediakan kaedah kemas kini untuk setiap item keadaan:

const [arrayState, setArrayState] = useState(initialState);
Salin selepas log masuk

Untuk menambah elemen baharu pada arrayState, anda boleh memanggil setArrayState dengan sama ada tatasusunan baharu atau fungsi yang mencipta tatasusunan baharu, biasanya yang terakhir disebabkan sifat kemas kini keadaan tidak segerak:

setArrayState(prevArray => [...prevArray, newElement]);
Salin selepas log masuk

Dalam acara diskret tertentu, seperti acara klik, anda mungkin boleh meninggalkan panggilan balik:

setArrayState([...arrayState, newElement]);
Salin selepas log masuk

Berikut ialah contoh langsung menunjukkan penggunaan panggil balik:

<code class="javascript">import React, { useState, useCallback } from "react";

function Example() {
  const [arrayState, setArrayState] = useState([]);
  const addEntryClick = () => {
    setArrayState(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
  };
  return [
    <input type="button" onClick={addEntryClick} value="Add" />,
    <div>
      {arrayState.map(entry => (
        <div key={entry}>{entry}</div>
      ))}
    </div>,
  ];
}

ReactDOM.render(<Example />, document.getElementById("root"));</code>
Salin selepas log masuk

Ingat bahawa prop utama adalah penting untuk memaparkan senarai dalam React untuk penyesuaian yang cekap dan prestasi optimum.

Atas ialah kandungan terperinci Bagaimanakah saya menambah elemen pada tatasusunan dalam React Hooks menggunakan useState?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan