javascript - 如何从导入的数组中查找键值对？反应JS

Question

我正在关注 youtube 教程，但我想改变它的一个方面。目前我正在通过一个数组进行映射以检索所有产品。但是，我想检索具有“Nike”特定值的所有产品。非常感谢。

import React, { Component } from "react";
import Product from "./Product";
import Title from "./Title";
import { ProductConsumer } from "../context";
export default class ProductList extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="py-5">
          <div className="container">
            <Title name="our" title="products" />
            <div className="row">
              <ProductConsumer>
                {value => {
                  return value.products.map(product => {
                    return <Product key={product.id} product={product} />;
                  });
                }}
              </ProductConsumer>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

标签： javascriptreactjs

Answer 1

在使用像这样的 .map() 函数之前，您需要过滤耐克项目的产品数组

<ProductConsumer>
  {value => {
    return value.products.filter(product => {
      return product.brand === 'Nike';
    }).map(product => {
      return <Product key={product.id} product={product} />;
    });
  }}
</ProductConsumer>