Quay lại danh sách case study
Xu ly loi Undefined khi goi API
Ứng viên xử lý tình huống trang web bị crash do gọi thuộc tính của một object trả về từ API nhưng bị null hoặc undefined.
Bối cảnh
Khi làm việc với component hiển thị thông tin user trong một ứng dụng React/JS thuần, dữ liệu từ API đôi khi trả về trễ hoặc bị thiếu field.
Vấn đề cần xử lý
Ứng dụng bị lỗi màn hình trắng (Uncaught TypeError: Cannot read properties of undefined) khi component render trước khi data kịp về.
Hướng xử lý đề xuất
Sử dụng Optional Chaining (?.) và Nullish Coalescing (??) của ES2020, kết hợp kiểm tra trạng thái loading trước khi render.
Câu trả lời mẫu khi phỏng vấn
Dạ, để giải quyết vấn đề này thì đầu tiên em sẽ dùng Optional Chaining dấu chấm hỏi chấm để truy cập an toàn vào các thuộc tính lồng nhau. Ngoài ra, em cũng thêm điều kiện kiểm tra biến loading để render ra dòng chữ 'Đang tải' thay vì cố render một object rỗng, và dùng toán tử ?? để gán giá trị dự phòng.
Trade-off
Việc dùng optional chaining có thể che giấu đi lỗi thiếu dữ liệu từ backend, khiến việc debug khó hơn nếu không có log hoặc TypeScript kiểm tra kiểu dữ liệu.
Kết quả kỳ vọng
Trang web hoạt động mượt mà, không còn lỗi crash UI bất ngờ khi data chậm hoặc thiếu.
Bài học khi trả lời phỏng vấn
Luôn luôn cẩn trọng với dữ liệu bất đồng bộ từ bên ngoài, phải defensive programming và kiểm tra kỹ trước khi truy cập thuộc tính.