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

使用include的过滤器数组

2 个答案: