使用include的過濾器數組

Question

我正在嘗試過濾我的數組availableSizes ，只顯示輸入到includes的特定大小

我正在測試5 ，它應該只輸出數字5，但是我得到this is not a function

我如何過濾此數組，使其僅輸出傳遞到includes方法的數字？

 render() {
        const { id, img, name, price, desc, color, match, material, size, slug } = this.props
        const { selectedSize, showSizes } = this.state
        const availableSizes = [5,6,7,8,9,10,11,12,13,14,15]

    return (
      <Wrap>
        <Half>
          <ImgWrap>
          {showSizes &&
            <Sizes>

              <SizeWrap>
                <div>selecta size</div>
                {availableSizes.filter(availableSize => availableSize.includes(5)).map((availableSize, index) =>
                  <Size
                    key={index}
                    active={selectedSize === availableSize.size}
                    onClick={() => this.handleSelectSize(availableSize.size)}
                    className="snipcart-add-item"
                    data-item-id={id}
                    data-item-name={name}
                    data-item-price={price}
                    data-item-url="/"
                    data-item-size={this.state.size}
                    data-item-description={desc}
                  >
                    {availableSize}
                  </Size>
                )}
              </SizeWrap>

Answer 1

進一步（可能）執行此步驟，您可能希望將可用大小匹配多個值。 因此，如果您有一個對5和6大小感興趣的用戶，則可以將其存儲在以下數組中： var selectedSizes = [5, 6]

然后，您可以使用以下可用尺寸進行匹配： availableSizes.filter(x => selectedSizes.includes(x))

Answer 2

過濾器回調中的availableSize將是一個數字。 號碼沒有方法包括。 您應該做的是檢查是否相等。

availableSizes.filter(availableSize => availableSize === 5)

對於主動道具，您應該

active={selectedSize === availableSize}

對於onClick也更改為

onClick={() => this.handleSelectSize(availableSize)}

對於多個大小，您可以構建這些大小的數組

const mySizes = [4, 5] 
availableSizes.filter(availableSize => mySizes.includes(availableSize))