Javascript / React veri eşleştiricisi

Question

Diğer ikisini birleştirerek bir durum (dize) uygulamak için çözümüm. İki parametresi (iki dize) alan ve bu iki dizgenin birleşimine göre bir tane daha döndürmesi gereken bir işlev bildirmem gerekiyor. Örneğin:

carStatus(status, secondaryStatus) => string

SecondStatus birden çok seçeneğe sahip olabilir. İhtiyacım olan üçüncü bir durumu döndüren bir if / else if ifadesi kullanıyorum. Örneğin, durum 'AÇIK' ve ikincil Durum 'ödeme1' veya 'ödeme2' veya 'ödeme3' olduğunda, işlev 'ONAYLANDI' gibi yeni bir dize (durum) döndürmelidir. Yani, şu andaki çözümüm şöyle bir şey olacaktır:

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>

Div dosyasında "ONAYLANDI" olarak gösterilmelidir.

Benim uygulamamda, başka 5 if ifadeler yazmam gerekecek .. bu yüzden belki bunu uygulamanın daha temiz bir yolu var.

Herhangi bir yardım takdir edilecektir.

Answer 1

Durum hatası Mevcut uygulamanızda bir hata var. Bunun gibi satırlarınızda sorun var:

(secondaryStatus === 'payment1' || 'payment2' || 'payment3')

JavaScript yalnızca tekli operatörler, ikili operatörler ve tek bir üçlü operatöre sahiptir. Yukarıda kullanılan tüm operatörler ikili operatörlerdir; tek bir ifade kalana kadar iki ifade tek bir ifade olarak değerlendirilecektir. Yana ===yüksek operatör önceliği daha vardır ||, kodunuz eşdeğerdir:

(secondaryStatus === 'payment1' || 'payment2' || 'payment3')

(trueOrFalse || 'payment2' || 'payment3')

Ve payment2ile payment3karşılaştırılmaz secondaryStatusve değilse secondaryStatus, payment1tüm ifade doğru 'payment2'bir değer olarak ||değerlendirilir (çünkü birinci yanlışsa ikinci değere değerlendirilir):

// || operates left-to-right:

(trueOrFalse || 'payment2' || 'payment3')

((false || 'payment2') || 'payment3')

(('payment2') || 'payment3')

// payment2 is truthy, so the `||` evaluates to it:
('payment2')

Mantığı düzeltmek için bunun yerine bir dizi kullanın ve dizideki her bir öğeye göre durumu kontrol edin.

Yazım hatası mı? Sen var (secondaryStatus === 'payment2' || 'payment5' || 'payment5')olan, payment5iki kez tekrarlanır. Başka bir şey mi kastettin payment9?

İsimler carStatus , içerdiği gibi aracın durumunu içermez; bu, çağrıldığında aracın durumunu döndüren bir işlevdir. Aynı zamanda kafa karıştırıcı şekilde benzer adlandırılmış bir statusparametre alır. Mümkünse, onlara başka bir şey deyin: belki getCarStatusve statusparametrenin temsil ettiği daha özel bir şey . Belki diyoruz secondaryStatus: paymentType.

KURU Ayrıca kodu daha KURU yapmak istersiniz, bu da onun yerine dizi kullanma fikrine uymaktadır. Anahtarları gereken durum olan ve değerleri olası secondaryStatusdeğerler ve bulunursa dönüş değeri olan bir nesne kullanabilirsiniz secondaryStatus.

Ayrıca, tüm ödeme dizeleri bir sayı ile bittiği ve bu sayı değişen tek şey olduğu için, tam paymentdizeler yerine yapılandırma nesnesini ayarlamak için bu sayıyı kullanın :

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;
        }
    }
}

Canlı snippet:

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')
);

Bileşen türü Bir sınıf bileşeni kullanıyormuşsunuz gibi görünüyor. React , yeni kodda işlevsel bileşenleri kullanmayı denemenizi önerir ; Çoğu durumda sınıf temelli bileşenlerle çalışmanın ve anlaşılmasının biraz daha kolay olduğunu söylüyorlar ve ben de aynı fikirdeyim. Bunun yerine işlevsel bileşenleri kullanmayı deneyin, henüz yapmadıysanız, onları beğenebilirsiniz.