Bagaimanakah saya boleh menolak elemen ke dalam tatasusunan keadaan dengan React\'s useState Hook?

Menolak Elemen ke dalam Tatasusunan Keadaan dengan Cangkuk Reaksi (useState)

Cangkuk React useState menyediakan mekanisme untuk mengendalikan keadaan dalam komponen berfungsi. Tidak seperti komponen kelas, di mana anda menggunakan this.setState() untuk mengemas kini keadaan, useState memperkenalkan fungsi kemas kini keadaan untuk mengubah suai keadaan komponen.

Cara Menolak Elemen ke dalam Keadaan Tatasusunan

Untuk menolak elemen ke dalam keadaan tatasusunan menggunakan useState, anda boleh mengikuti langkah berikut:

1. Mulakan keadaan anda dengan tatasusunan menggunakan cangkuk useState:

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

2. Buat fungsi kemas kini keadaan yang dipanggil setTheArray yang membolehkan anda mengubah suai keadaan tatasusunan.

3. Untuk menolak elemen ke dalam tatasusunan, panggil setTheArray dan masukkan fungsi yang mengembalikan tatasusunan yang dikemas kini. Fungsi harus mengambil keadaan sebelumnya (oldArray) sebagai hujah:

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

Borang Panggilan Balik lwn. Borang Bukan Panggilan Balik

Dalam kebanyakan kes, adalah disyorkan untuk menggunakan borang panggil balik semasa mengemas kini tatasusunan dalam keadaan. Ini kerana kemas kini keadaan tidak segerak, bermakna pelaksanaannya tidak serta-merta. Dengan menggunakan borang panggil balik, anda boleh memastikan bahawa versi terkini keadaan sentiasa digunakan untuk kemas kini tatasusunan.

Walau bagaimanapun, terdapat keadaan tertentu di mana anda boleh menggunakan borang bukan panggil balik tanpa sebarang masalah. Ini hanya terpakai apabila anda mengemas kini keadaan tatasusunan semata-mata dalam pengendali untuk acara pengguna tertentu, seperti acara klik.

Contoh Menolak Elemen

Pertimbangkan React berikut contoh komponen yang menunjukkan menolak elemen ke dalam keadaan tatasusunan:

<code class="js">const {useState} = 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>

Dalam contoh ini, apabila butang "Tambah" diklik, pengendali addEntryClick memanggil setTheArray dengan fungsi panggil balik yang mengembalikan tatasusunan baharu dengan elemen baharu ditambah pada penghujung.

Dengan menggunakan kaedah tolak dalam cangkuk useState React, anda boleh mengurus tatasusunan keadaan dengan berkesan, sama ada menambah, mengalih keluar atau mengubah suai kandungannya, untuk mencapai pangkalan kod yang lebih cekap dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menolak elemen ke dalam tatasusunan keadaan dengan React\'s useState Hook?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!