如何在 ReactJs 组件中使用 .filter

Question

我是第一次使用 React，我正在尝试过滤 JSON 响应以便我可以显示产品列表。

当我将过滤器的结果记录到控制台时，我似乎得到了正确的数据。但是，当我尝试映射并渲染它时，“.Products”似乎未定义。

import React, { useContext } from 'react';
import { MenuContext } from '../context/menuContext';

function Category() {
    const [categoryItems] = useContext(MenuContext);

    const category = categoryItems.filter(element => element.CategoryName == "Rice");

    console.log(category);

    return (

        <div>
            <h1>Category Page</h1>

            {category.Products.map(productItem => (
                <h3 key={productItem.Id}>{productItem.ProductName}</h3>

            ))}
        </div>
    );
}
export default Category;

更新：感谢@Ori Drori 的评论。我已经尝试使用 .find 但仍然无法正常工作。

我认为这与 React 的工作方式有关。因为在控制台中，我在得到正确结果之前得到了一个空输出。

更新 2：我实施了我标记为正确的答案，现在它正在运行。然而。有两点不明白，希望有人解释一下。

当我打电话时

console.log(console.log(类别);

为什么我在控制台中看到 'undefined'，然后才得到数据结果。

为什么我删除的时候需要放'category &&'。它停止工作。

Answer 1

category 是一个列表，而不是单个对象。 Array.filter 的输出始终是一个列表。这就是为什么：category.Product 是 undefined.

如果要查找名称为Rice的类别，可以将代码更改为：

import React, { useContext } from "react";
import { MenuContext } from "../context/menuContext";

function Category() {
  const [categoryItems] = useContext(MenuContext);

  const category = categoryItems.find(
    (element) => element.CategoryName === "Rice",
  ); // change `filter` to `find` and `==` to `===`

  console.log(category);

  return (
    <div>
      <h1>Category Page</h1>

      {category && // add this because category can be undefined
        category.Products.map((productItem) => (
          <h3 key={productItem.Id}>{productItem.ProductName}</h3>
        ))}
    </div>
  );
}
export default Category;

如果还是不行，显示错误，还有 console.log category.Products

Answer 2

当您使用方法过滤它时 returns 作为一个数组：

category.map(()=>)

或使用该方法在类别中查找项目产品：

const find = category.find(elem=>elem.product)
find.map(()=>)

如何在 ReactJs 组件中使用 .filter

How to use .filter inside ReactJs Component

javascript

reactjs

react-hooks

react-component