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

Tolak elemen ke dalam tatasusunan dengan useState dalam React

Apabila menggunakan cangkuk useState dalam React, anda boleh mengubah suai tatasusunan keadaan anda dengan menggunakan kemas kininya kaedah. Kaedah ini disediakan apabila anda memulakan item keadaan, seperti:

<code class="js">const [theArray, setTheArray] = useState(initialArray);</code>

Untuk menambah elemen baharu pada tatasusunan, masukkan tatasusunan yang dikemas kini atau fungsi yang menjana tatasusunan baharu kepada kaedah setTheArray. Yang terakhir ini biasanya digunakan kerana kemas kini keadaan dalam React adalah tidak segerak dan mungkin berlaku dalam kelompok.

<code class="js">setTheArray(oldArray => [...oldArray, newElement]);</code>

Sebagai alternatif, sintaks pintasan ini mungkin mencukupi jika anda hanya membuat kemas kini dalam pengendali untuk acara pengguna tertentu (seperti klik , tetapi bukan pergerakan tetikus):

<code class="js">setTheArray([...theArray, newElement]);</code>

Peristiwa yang mencetuskan pemaparan siram dalam React dikenali sebagai "peristiwa diskret."

Contoh langsung:

<code class="js">const { useState, useCallback } = React;
function Example() {
  const [theArray, setTheArray] = useState([]);
  const addEntryClick = () => {
    setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
  };
  return [
    <input type="button" onClick={addEntryClick} value="Add" />,
    <div>
      {theArray.map(entry => <div>{entry}</div>)}
    </div>
  ];
}

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

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