Giới Thiệu

Một trong những phần thú vị nhất khi trở thành lập trình viên là khi bạn có cơ hội áp dụng những khái niệm đã học vào các tình huống thực tế. Trong JavaScript, tôi đã tìm hiểu về các phương thức mảng bậc cao như map() và filter(), nhưng quan trọng hơn, cách kết hợp chúng để tạo ra những kết quả tinh vi hơn. Việc biết cách hoạt động của các phương thức này chỉ là một phần, nhưng việc giải quyết một vấn đề thực tế với chúng mới là điều quan trọng.

Chính xác là điều này đã xảy ra khi tôi xây dựng dự án biểu mẫu nhiều bước từ Frontend Mentor. Tôi đã phát hiện ra một trường hợp sử dụng thực tế cho việc kết hợp các phương thức mảng bậc cao, cụ thể là map().

Thử Thách

Trong bước thứ 3 của biểu mẫu, người dùng sẽ chọn các tính năng bổ sung cho gói đăng ký của họ. Ứng dụng có hai loại thanh toán (Tháng & Năm) được chọn từ bước thứ 2 bằng một công tắc, vì vậy khi loại thanh toán thay đổi, giá của các tính năng bổ sung nên ngay lập tức phản ánh loại thanh toán đã chọn. Tuy nhiên, có một vấn đề xảy ra.

Vấn đề là mỗi khi công tắc thay đổi, trạng thái lưu trữ các tính năng bổ sung được chọn của người dùng không phản ánh ngay lập tức sự thay đổi giá, trừ khi họ chọn lại, điều này không hiệu quả lắm. Tôi cần một cách để tự động cập nhật trạng thái mỗi khi loại thanh toán thay đổi để nó phản ánh trong giao diện người dùng.

Cách Tiếp Cận Của Tôi

Dưới đây là cách tôi đã giải quyết vấn đề:

Lặp qua các tính năng bổ sung được chọn của người dùng – Tôi đã sử dụng .map() trên trạng thái selectedAddons, đó là một mảng.
Tìm tính năng bổ sung phù hợp từ danh sách mặc định – Sau khi lặp qua mảng, tôi đã sử dụng phương thức findIndex() để tìm từng tính năng bổ sung phù hợp từ danh sách các tính năng bổ sung đã được định nghĩa trước.
Cập nhật giá một cách động với chỉ số – Đây là nơi mà việc kết hợp xảy ra. Tôi đã xây dựng một mảng mới với .map() để cập nhật giá của các tính năng bổ sung mà người dùng đã chọn.
Phản ứng với sự thay đổi trạng thái – Tôi đã sử dụng useEffect() để lắng nghe sự thay đổi trong trạng thái radioChecked (công tắc). Mỗi khi nó thay đổi, mã trong các bước trên sẽ chạy, cập nhật trạng thái và làm mới giao diện người dùng.

Với cách tiếp cận này, người dùng không cần phải chọn lại các tính năng bổ sung của họ trước khi giá được cập nhật.

Mã Nguồn

Dưới đây là phiên bản đơn giản của mã đã kết nối mọi thứ lại với nhau:

javascript Copy

import { useState, useEffect } from 'react';

// Addons là một mảng các đối tượng
const addons = [];

export default function App() {

const [selectedAddons, setSelectedAddons] = useState([]);

useEffect(() => {
  const updateSelectedAddons = selectedAddons.map(selectedAddon => addons.findIndex(addon => addon.name === selectedAddon.name)).map(index => {
    return {
      ...addon,
      price: radioChecked ? addons[index].monthlyPrice 
        : addons[index].yearlyPrice
    };
  })

  setSelectedAddons(updateSelectedAddons);
}, [radioChecked]);
}

Với chỉ vài dòng mã, .map() và useEffect() đã làm việc cùng nhau để giữ cho giao diện người dùng luôn nhất quán và phản hồi với hành động của người dùng.

Thực Hành Tốt Nhất

Kiểm tra mã thường xuyên: Đảm bảo rằng mã của bạn không có lỗi trước khi triển khai.
Sử dụng các phương thức mảng bậc cao: Chúng giúp mã của bạn ngắn gọn và dễ hiểu hơn.
Tối ưu hóa hiệu suất: Hãy chắc chắn rằng mã của bạn không chỉ hoạt động mà còn hoạt động hiệu quả.

Cạm Bẫy Thường Gặp

Quên cập nhật trạng thái: Đảm bảo rằng bạn cập nhật trạng thái mỗi khi có thay đổi để tránh những lỗi không mong muốn.
Sử dụng không đúng phương thức: Hãy cẩn thận khi sử dụng map() và findIndex(); đảm bảo chúng hoạt động như mong đợi.

Mẹo Hiệu Suất

Sử dụng React.memo để tối ưu hóa hiệu suất của các thành phần.
Cân nhắc việc sử dụng useMemo để tránh tính toán lại không cần thiết.

Khắc Phục Sự Cố

Nếu bạn gặp phải lỗi không phản ánh giá đúng, hãy kiểm tra lại logic trong useEffect() và đảm bảo rằng trạng thái radioChecked được cập nhật đúng cách.

Kết Luận

Trải nghiệm này đã cho tôi thấy rằng các khái niệm sẽ bám sát hơn khi bạn áp dụng chúng. Tôi đã học về .map() và các hàm mảng bậc cao khác trước đó, nhưng chính trong khi xây dựng dự án này tôi mới hiểu cách chúng có thể được áp dụng để giải quyết vấn đề. Đây chính xác là điều mà lập trình là về, giải quyết vấn đề.

Nếu bạn đang học JavaScript (hoặc bất kỳ ngôn ngữ lập trình nào khác), tôi khuyên bạn nên:

Xây dựng các dự án, ngay cả những dự án nhỏ.
Tìm kiếm cơ hội để kết nối các khái niệm mới với các vấn đề thực tế.
Đừng chỉ đọc lý thuyết, hãy áp dụng nó.

Bạn đã học được khái niệm nào gần đây mà bạn đã áp dụng trong một dự án không?

Tôi là Oyinkansola, một lập trình viên frontend, xây dựng các giải pháp cho các doanh nghiệp không kỹ thuật và chia sẻ những gì tôi học được trong quá trình đó, trong khi giúp các lập trình viên viết mã tốt hơn và thông minh hơn. Bạn có thể kết nối với tôi trên LinkedIn và X. Đây là bản xem trước trực tiếp của dự án, cũng như repo trên GitHub.

Cách Áp Dụng Phương Thức Mảng Bậc Cao Trong Dự Án