ホーム>source

Reactにプレゼンテーションコンポーネントがあります。そして products.some で  私は products の中にアイテムがあるかどうかを確認しようとしています  チェックされます。いくつかの項目がチェックされている場合、 RequestedProduct の親ブロックをレンダリングします  成分。 Reactが小道具だと考えているように、問題は中括弧の2番目のペアであることを知っています。これを行う別の方法はありますか?

const Requested = ({ products, getCurrentTime }) => (
  <div className="pepper-pin-body-tab requested-tab">
    <div className="pepper-pin-body-tab-title">
      Запрошенные
    </div>
    <div className="pepper-pin-body-tab-indicator" />
    {products.some(product => product.checked) ? (
      <div className="requested-tab-list-requested">
        <div className="requested-tab-list-requested-time">
          {getCurrentTime()}
        </div>
        {products.filter((product, key) => {
          if (product.checked) {
            return (
              <RequestedProduct
                key={key}
                title={product.title}
              />
            );
          }
        })}
      </div>
    ) : null}
  </div>
);

あなたの答え
  • 解決した方法 # 1

    問題は、フィルターはカスタム要素/値を返さず、フィルター本体からtrueを返す配列要素を常に返すことです。

    解決策は、マップのみ、またはフィルターとマップの組み合わせを使用することです。

    マップを使用する:

    {
        products.map((product, key) => product.checked ? 
            <RequestedProduct key={key} title={product.title} /> 
            : null
    }
    
    

    フィルターとマップの組み合わせを使用:

    {
        products
        .filter(product => product.checked)
        .map((product, key) => <RequestedProduct key={key} title={product.title}/>)
    }
    
    

    このスニペットを確認すると、より良いアイデアが得られます。

    const arr = [
      {a: 1},
      {a: 2},
      {a: 3},
      {a: 4}
    ];
    const afterFilter = arr.filter((el,i) => {
      if(i%2) {
        return `Hello world ${i}`;
      }
    });
    // it will print the array items, not the Hello World string
    console.log('afterFilter', afterFilter);
    
    

  • 解決した方法 # 2

    コードを少し分割することをお勧めします。これにより、コードの意図がより明確になります。エラーを引き起こしてはならない次のような結果になります(たとえば)。

    主な問題は、フィルターの意図しない副作用にありますが、ほとんどの場合、 filter を使用する必要があります。  そして、 map 。これにより、別の開発者の意図がより明確になります。

    const contents = (products, getCurrentTime) => (
        const filtered = products.filter(product => product.checked);
        <div className="requested-tab-list-requested">
            <div className="requested-tab-list-requested-time">
                {getCurrentTime()}
            </div>
            {filtered.map((product, key) => <RequestedProduct key={key} title={product.title}/>)}
        </div>  
    );
    const Requested = ({products, getCurrentTime}) => {
        const isAnythingChecked = products.some(product => product.checked);
        return <div className="pepper-pin-body-tab requested-tab">
            <div className="pepper-pin-body-tab-title">
                Запрошенные
            </div>
            <div className="pepper-pin-body-tab-indicator"/>
            {isAnythingChecked ? contents(products, getCurrentTime) : null}
        </div>
    };
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ マイクロサービスアーキテクチャで応答合成を実行する方法と場所