cốt truyện

Tôi đang xây dựng một ứng dụng bằng Firebase trong React và tôi rất ngạc nhiên khi biết rằng tôi đã đạt đến giới hạn 50 nghìn lượt đọc trong ngày. Tôi không thể hiểu làm thế quái nào mà điều đó lại có thể xảy ra vì ứng dụng của tôi chỉ chạy cục bộ trên máy của tôi và tôi là người dùng DUY NHẤT.

Sự cố mà tôi gặp phải có liên quan đến việc sắp xếp lại thành phần của tôi khi thực hiện cuộc gọi không đồng bộ đã thay đổi biến trạng thái.

Dưới đây là một ví dụ về cách kém để thực hiện cuộc gọi không đồng bộ bằng cách sử dụng useEffect.

import {useEffect} from 'react'
function Example() {
    const [vehicles, setVehicles] = useState([])
    const vehiclesRef = collection(db, 'vehicles')

    useEffect(() => {
        const getVehicles = async () => {
            const data = await getDocs(vehiclesRef)
            setVehicles(data.docs.map( doc => ( // memory leaks 
                        {
                            ...doc.data(), 
                            id:doc.id 
                        }
                    )
                )
            )
        }

        getVehicles()
    },[vehicles])       
}

Cảnh báo: Không thể thực hiện cập nhật trạng thái React trên một thành phần chưa được đếm. Đây là lỗi không hoạt động, nhưng nó cho biết ứng dụng của bạn bị rò rỉ bộ nhớ. Để khắc phục, hãy hủy tất cả các đăng ký và tác vụ không đồng bộ trong chức năng dọn dẹp useEffect.

Khi gọi setState, thành phần của bạn sẽ kết xuất lại để cập nhật DOM với những thay đổi đối với giá trị đó. Điều này có nghĩa là nó setVehicles()sẽ tiếp tục khởi tạo mỗi khi thành phần được gắn kết. Điều này sẽ gây ra một vòng kết xuất lại vô tận, điều này sẽ khiến bạn tốn rất nhiều tiền khi thực hiện các lệnh gọi hàm đắt tiền.

Đây là cách tôi sửa nó.

import {useEffect, useRef} from 'react'
function Example() {
    const [vehicles, setVehicles] = useState([])
    const vehiclesRef = collection(db, 'vehicles')

    useEffect(() => {
        let isMounted = true

        const getVehicles = async () => {
            const data = await getDocs(vehiclesRef)
            
            if(isMounted){
                setVehicles(data.docs.map( doc => (
                            {
                                ...doc.data(), 
                                id:doc.id 
                            }
                        )
                    )
                )
            }
        }

        getVehicles()

        console.log(vehicles)

        return () => { isMounted = false }
    }, [vehicles]) 
}

Khi isMounted là false, mã sẽ không chạy cho đến khi giá trị đó được đặt thành true, khi thành phần được gắn lại.

Hi vọng điêu nay co ich!

Tăng cấp mã hóa

Cảm ơn vì đã là một phần của cộng đồng của chúng tôi! Trước khi bạn đi:

• Vỗ tay cho truyện và theo dõi tác giả
• Xem thêm nội dung trong ấn phẩm Level Up Coding
• Theo dõi chúng tôi: Twitter | LinkedIn | bản tin