Javascript / Reactデータマッパー

Sep 26 2020

他の2つのステータス（文字列）を組み合わせて実装する私のソリューション。2つのパラメータ（2つの文字列）を取り、それら2つの文字列の組み合わせに基づいて別のパラメータを返す関数を宣言する必要があります。例：

carStatus(status, secondaryStatus) => string

ここで、secondaryStatusには複数のオプションがあります。必要な3番目のステータスを返すif / elseifステートメントを使用しています。たとえば、ステータスが「OPEN」で、secondaryStatusが「payment1」または「payment2」または「payment3」の場合、関数は「CONFIRMED」のような新しい文字列（ステータス）を返す必要があります。したがって、現時点での私の解決策は次のようになります。

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では「CONFIRMED」にレンダリングする必要があります。

私の実装では、他の5つのifステートメントを記述する必要があります。したがって、これを実装するためのよりクリーンな方法があるかもしれません。

どんな助けでもありがたいです。

回答

3 CertainPerformance Sep 26 2020 at 22:01

状態のバグ現在の実装にはバグがあります。これらのようなあなたの行には問題があります：

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

JavaScriptには、単項演算子、二項演算子、および単一の三項演算子のみがあります。上記で使用されている演算子はすべて二項演算子です。1つの式が残るまで、2つの式が1つの式に評価されます。===はよりも演算子の優先順位が高いため||、コードは次と同等です。

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

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

payment2とがpayment3比較されていないsecondaryStatus、および場合secondaryStatusはないpayment1、式全体は、と評価される'payment2'（ためtruthy値、||第falseyあれば第2の値に評価します）。

// || operates left-to-right:

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

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

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

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

ロジックを修正するには、代わりに配列を使用し、配列内の各要素に対してステータスを確認します。

打ち間違え？あなたは(secondaryStatus === 'payment2' || 'payment5' || 'payment5')、をpayment52回繰り返しました。あなたは何か他のものを意味しましたpayment9か？

名前に carStatusは車のステータスは含まれていません。含まれているように聞こえます。これは、呼び出されたときに車のステータスを返す関数です。また、紛らわしい名前のstatusパラメーターを取ります。可能であれば、それらを別の名前で呼び出します。おそらくgetCarStatus、statusパラメーターが表すより具体的なものです。多分電話secondaryStatus：paymentType。

DRYまた、コードをよりDRYにしたいので、代わりに配列を使用するという考えにうまく適合します。キーが必要なステータスであり、値が可能なsecondaryStatus値であり、secondaryStatusが見つかった場合は戻り値であるオブジェクトを使用できます。

また、すべての支払い文字列は数字で終わり、変更されるのはその数字だけなので、完全なpayment文字列の代わりにその数字を使用して構成オブジェクトを設定します。

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

ライブスニペット：

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

コンポーネントタイプクラスコンポーネントを使用しているようです。Reactは、新しいコードで機能コンポーネントを使用してみることをお勧めします。彼らは、ほとんどの状況でクラスベースのコンポーネントよりも操作と理解が少し簡単だと言っていますが、私は同意します。代わりに機能コンポーネントを使用してみてください。まだ使用していない場合は、気に入るかもしれません。