Trình ánh xạ dữ liệu Javascript / React
Giải pháp của tôi để triển khai một trạng thái (chuỗi) từ việc kết hợp hai trạng thái khác. Tôi cần khai báo một hàm nhận hai tham số (hai chuỗi) và cần trả về một tham số khác dựa trên sự kết hợp của hai chuỗi đó. Đối với ví dụ:
carStatus(status, secondaryStatus) => string
trong đó, SecondaryStatus có thể có nhiều tùy chọn. Tôi đang sử dụng câu lệnh if / else if trả về trạng thái thứ ba mà tôi cần. Đối với ví dụ: khi trạng thái là 'MỞ' và Trạng thái phụ là 'thanh toán1' hoặc 'thanh toán2' hoặc 'thanh toán3', hàm phải trả về một chuỗi (trạng thái) mới như 'ĐÃ XÁC NHẬN'. Vì vậy, giải pháp của tôi tại thời điểm này sẽ là như sau:
carStatus = (status, secondaryStatus) => {
if(status === 'OPEN' && (secondaryStatus === 'payment1' || 'payment2' || 'payment3')){
return 'CONFIRMED';
} else if(status === 'CANCELLED' && (secondaryStatus === 'payment4' || 'payment5' || 'payment6')){
return 'REMOVED';
} else if(status === 'REVIEW' && (secondaryStatus === 'payment2' || 'payment5' || 'payment5')){
return 'CHECKED';
}
}
<div>carStatus('OPEN', 'payment1')</div>
Trong div phải được hiển thị 'ĐÃ XÁC NHẬN'.
Trong phần triển khai của mình, tôi sẽ phải viết tôi nghĩ 5 câu lệnh else if khác .. vì vậy có lẽ có một cách rõ ràng hơn để thực hiện điều này.
Bất kỳ trợ giúp sẽ được đánh giá cao.
Trả lời
Lỗi điều kiện Triển khai hiện tại của bạn có lỗi. Những dòng như thế này của bạn có vấn đề:
(secondaryStatus === 'payment1' || 'payment2' || 'payment3')
JavaScript chỉ có các toán tử một ngôi, toán tử nhị phân và một toán tử bậc ba duy nhất. Tất cả các toán tử được sử dụng ở trên là toán tử nhị phân; hai biểu thức sẽ được đánh giá thành một biểu thức cho đến khi còn lại một biểu thức duy nhất. Vì ===có ưu tiên toán tử cao hơn ||, mã của bạn tương đương với:
(secondaryStatus === 'payment1' || 'payment2' || 'payment3')
(trueOrFalse || 'payment2' || 'payment3')
Giá trị payment2và payment3không được so sánh với secondaryStatusvà nếu secondaryStatuskhông payment1, toàn bộ biểu thức sẽ đánh giá thành 'payment2', một giá trị trung thực (vì ||sẽ đánh giá đến giá trị thứ hai nếu giá trị đầu tiên là sai):
// || operates left-to-right:
(trueOrFalse || 'payment2' || 'payment3')
((false || 'payment2') || 'payment3')
(('payment2') || 'payment3')
// payment2 is truthy, so the `||` evaluates to it:
('payment2')
Để sửa lỗi logic, hãy sử dụng một mảng thay thế và kiểm tra trạng thái của từng phần tử trong mảng.
Đánh máy? Bạn có (secondaryStatus === 'payment2' || 'payment5' || 'payment5'), với payment5lặp lại hai lần. Ý bạn là gì khác, như thế payment9nào?
Tên carStatus không chứa trạng thái của ô tô, vì nó có vẻ chứa; đó là một hàm, khi được gọi, trả về trạng thái của ô tô. Nó cũng có một statustham số có tên giống nhau một cách khó hiểu . Gọi chúng là một cái gì đó khác, nếu có thể: có lẽ getCarStatusvà bất cứ điều gì cụ thể hơn mà statustham số đại diện. Có lẽ gọi secondaryStatus: paymentType.
DRY Bạn cũng muốn làm cho mã KHÔ hơn, điều này rất phù hợp với ý tưởng sử dụng mảng thay thế. Bạn có thể sử dụng một đối tượng, có khóa là trạng thái được yêu cầu và giá trị của nó là các secondaryStatusgiá trị có thể có cũng như giá trị trả về nếu secondaryStatustìm thấy.
Ngoài ra, vì tất cả các chuỗi thanh toán đều kết thúc bằng một số và số đó là thứ duy nhất thay đổi, hãy sử dụng số đó để thiết lập đối tượng cấu hình thay vì các paymentchuỗi đầy đủ :
const statusOptions = {
OPEN: { paymentNumbers: [1, 2, 3], status: 'CONFIRMED' },
CANCELLED: { paymentNumbers: [4, 5, 6], status: 'REMOVED' },
REVIEW: { paymentNumbers: [2, 5], status: 'CHECKED' },
};
// ...
getCarStatus = (status, paymentType) => {
const possibleOption = statusOptions[status];
if (possibleOption) {
const paymentNumber = Number(paymentType.match(/\d+$/)[0]);
if (possibleOption.paymentNumbers.includes(paymentNumber)) {
return possibleOption.status;
}
}
}
Đoạn mã trực tiếp:
const statusOptions = {
OPEN: { paymentNumbers: [1, 2, 3], status: 'CONFIRMED' },
CANCELLED: { paymentNumbers: [4, 5, 6], status: 'REMOVED' },
REVIEW: { paymentNumbers: [2, 5], status: 'CHECKED' },
};
// ...
getCarStatus = (status, paymentType) => {
const possibleOption = statusOptions[status];
if (possibleOption) {
const paymentNumber = Number(paymentType.match(/\d+$/)[0]);
if (possibleOption.paymentNumbers.includes(paymentNumber)) {
return possibleOption.status;
}
}
};
console.log(
getCarStatus('OPEN', 'payment3'),
getCarStatus('REVIEW', 'payment2')
);Loại thành phần Có vẻ như bạn đang sử dụng một thành phần lớp. React khuyên bạn nên thử sử dụng các thành phần chức năng trong mã mới; họ nói rằng chúng dễ làm việc và hiểu hơn một chút so với các thành phần dựa trên lớp trong hầu hết các trường hợp, và tôi đồng ý. Thay vào đó, hãy thử sử dụng các thành phần chức năng, nếu bạn chưa có, bạn có thể thích chúng.