Kesilapan ommon teratas dalam Pembangunan Reaksi dan Cara Mengelakkannya ⚛️

Saya telah membangunkan aplikasi React selama beberapa tahun sekarang dan saya telah melalui banyak kesilapan yang melambatkan pembangunan projek anda.

React ialah salah satu perpustakaan paling popular untuk membina antara muka pengguna dinamik, tetapi fleksibilitinya juga boleh membawa kepada kesilapan biasa tertentu untuk pembangun baharu.

Panduan ini merangkumi kesilapan utama yang boleh dilakukan oleh pembangun dalam React dan menyediakan petua yang boleh diambil tindakan untuk menulis kod yang lebih baik dan lebih cekap.

Jom selami!

1. Keadaan Bermutasi

Sebelum meneruskan, mari tulis komponen React kami dahulu yang sepatutnya memaparkan senarai item, serta menambah atau mengalih keluar satu:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Perkara pertama yang dilakukan oleh kaedah ini ialah memanggil fungsi tatasusunan tekan yang bertujuan untuk menambah elemen pada tatasusunan.
Perkara kedua ialah memanggil setItems untuk menggunakan perubahan pada pembolehubah keadaan.

Namun, jika anda cuba menjalankan kod ini, ia tidak akan berfungsi ❌

Kod ini melanggar peraturan React yang sangat penting: memutasi keadaan.

React bergantung pada identiti pembolehubah keadaan untuk memberitahu apabila keadaan telah berubah. Apabila kami menolak item ke dalam tatasusunan, kami tidak mengubah identiti tatasusunan itu, jadi React tidak dapat memberitahu bahawa nilai itu telah berubah dan memaparkan semula tatasusunan itu.

Berikut ialah cara membetulkannya ✅ :

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

Dalam kaedah ini, saya mencipta tatasusunan baharu menggunakan pengendali hamparan ... membenarkan membuat instantiate tatasusunan baharu dengan kandungan item. Parameter kedua digunakan untuk menambah kandungan baharu (item di sini).

Langkah terakhir ialah memanggil kaedah setItems untuk mengesahkan keadaan baharu item pembolehubah ✅

---

2. Tidak menjana kunci dalam Senarai

Setiap pembangun React mungkin telah melihat ralat ini sekurang-kurangnya sekali semasa perjalanan pembangunan mereka.

Cara paling biasa untuk perkara ini berlaku ialah apabila memetakan data. Berikut ialah contoh pelanggaran ini:

items.map((item) => (
    <div>
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Apabila kita ingin membuat tatasusunan elemen, kita perlu memberikan React sedikit lebih konteks untuk membolehkannya mengenal pasti setiap item. Dalam dunia yang terbaik, ia mestilah pengecam unik.

Berikut ialah cara cepat untuk membetulkannya, tetapi itu tidak optimum:

items.map((item, index) => (
    <div key="{index}">
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Memandangkan anda akan memperoleh pengalaman dalam React dan memahami cara ia berfungsi dengan lebih baik, anda akan dapat mengetahui sama ada ia baik atau tidak berdasarkan kes anda.

Untuk menjadikannya sempurna, anda boleh menggunakan penjana uuid seperti crypto.randomUUID() dan menyimpannya ke dalam senarai item anda sebagai objek seperti berikut:

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

dan gunakannya seperti berikut semasa pemaparan:

items.map((item, index) => (
    <div key="{item.id}">
        {item.value}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Sekarang semuanya sempurna ✅

---

3. Menggunakan async dalam useEffect

Katakan kita mempunyai fungsi yang perlu mengambil beberapa data daripada API pada pelekap. Kami akan menggunakan cangkuk useEffect dan kami mahu menggunakan kata kunci await.

Jom semak percubaan pertama:

Seperti yang anda ketahui, kata kunci tunggu perlu berada dalam fungsi yang ditandakan dengan kata kunci async:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Malangnya, ini tidak berfungsi dan kami mendapat mesej ralat ini:

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

Berikut ialah pembetulan: cipta fungsi async berasingan dalam cangkuk useEffect ✅

items.map((item) => (
    <div>
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Adalah penting untuk memahami maksud kata kunci async:
Ia tidak mengembalikan objek json, ia mengembalikan Janji yang menyelesaikan objek json.

Ini sebenarnya masalah, kerana useEffect tidak sepatutnya membalas Janji. Ia menjangkakan kami tidak mengembalikan apa-apa (seperti kami di atas), atau fungsi pembersihan. Fungsi pembersihan adalah penting, di luar skop panduan ini, tetapi di sini adalah untuk menggunakannya:

items.map((item, index) => (
    <div key="{index}">
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

---

4. Mengakses keadaan sebelum dipaparkan semula

Mari kita kembali kepada pengurusan negeri untuk satu lagi kesilapan menarik yang sering dilakukan oleh pembangun baharu. Ini akan membantu kami memahami keadaan React dengan lebih baik.

Mari ambil kaedah goodHandleAddItem kami untuk menggambarkan ini:

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

Apabila menjalankan kod ini, kita dapat melihat bahawa konsol tidak mencatatkan hasil yang kita jangkakan.

Berikut ialah masalahnya: fungsi penetap pembolehubah keadaan ialah tak segerak.

Apabila kami memanggil kaedah setItems, kami sebenarnya menjadualkan kemas kini dan tidak memberikan pembolehubah.

Berikut ialah pembetulan: kita sudah tahu kandungan pembolehubah sepatutnya dengan pembolehubah newArray. Yang bermaksud bahawa untuk menggunakan data yang kita mahukan sebagai kandungan pembolehubah item, kita perlu menggunakan pembolehubah newArray sebaliknya walaupun selepas setItems ✅

---

5. Menggunakan data Negeri yang lapuk

Yang terakhir juga mengenai pengurusan keadaan React, anda akan menjadi profesional selepas panduan ini! ?

Perangkap biasa apabila menggunakan React Hooks ialah penyalahgunaan data keadaan lapuk. Ini boleh berlaku apabila kita merujuk terus pembolehubah keadaan dalam kemas kini keadaan berturut-turut. Seperti yang kita lihat dalam ralat sebelumnya, kemas kini keadaan mungkin tidak segerak, ini bermakna pembolehubah keadaan mungkin tidak mencerminkan nilai terkini apabila ia dirujuk dalam panggilan berturut-turut.

Mari kita gunakan contoh serba baharu untuk menjadikan perkara lebih jelas, kaunter yang terkenal:

items.map((item, index) => (
    <div key="{item.id}">
        {item.value}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Penggunaan di atas adalah salah. Malah, kiraan dirujuk terus dalam panggilan setCount. Dalam pengendali peristiwa dan kaedah kitaran hayat, kemas kini keadaan boleh dikumpulkan dan kedua-duanya akan menggunakan nilai awal yang sama seperti kiraan, yang akan membawa kepada keadaan akhir yang salah.

Terdapat satu lagi bentuk setCount yang boleh kita gunakan untuk membuat sesuatu berfungsi: fungsi pengemas kini. Fungsi pengemas kini mengambil keadaan sebelumnya sebagai hujah dan mengembalikan keadaan baharu, jadi setiap kemas kini berturut-turut akan mempunyai nilai yang betul, menghalang tingkah laku yang tidak diingini.

Berikut ialah cara menggunakannya:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Melog kandungan kiraan kini menunjukkan nilai yang betul ✅

---

Kesimpulan

Mengelakkan kesilapan biasa ini akan menjadikan anda membangunkan aplikasi React yang lebih berprestasi dan menguasai pengurusan negeri!

Saya harap panduan ini membantu anda dan mengucapkan selamat berkod!

Tinggalkan suka jika anda menikmati panduan ini, sebagai pembangun React yang baharu atau disahkan ?

Jumpa lagi!