Bagaimanakah saya menambah elemen pada tatasusunan dalam React Hooks menggunakan 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);

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]);

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

setArrayState([...arrayState, newElement]);

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>

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!