Question

我想根据与对象关联的类别显示图片。有一个对象数组，每个对象都包含一个类别键。有一个单独的数组，称为类别。我希望能够单击Categories数组中的值之一，并显示所有具有相同category键的对象。

category数组中的值是动态创建的。

我既可以显示类别数组，也可以通过对象数组进行映射并获取所有对象。我不确定如何将两者连接起来。

这是我到目前为止所拥有的图像：

a busy cat

这将显示所有类别的所有保存图像。

我希望能够单击诸如change之类的类别，并且仅获取与该类别关联的对象。

Images.js

const Images = props => {
  let { images } = props;
  const categoriesView = () => {
    if (images !== [] && images !== undefined) {
      return (
        <div>
          {images.map(img => {
            let { id, link, category } = img;
            console.log('category', category)
            return (
              <div key={id}>
                <Image saved="true" cats={link} alt="icons" />
              </div>
            );
          })}
        </div>
      );
    }
  };
  return <div>{categoriesView()}</div>;
};

Category.js

const Category = () => {
      return (
        <ul>
          {categories.map(category => {
            return (
                <li 
                  onClick={props.click}
                  value={category}
                  key={category}
                >
                  {category}
                </li>
            );
          })}
        </ul>
      );
  };

Answer 1

我认为您做这样的事会更好。拥有一个类似于“类别”的高阶组件，将selectedCategory馈送到“图像”组件。

Categories.js

import React from "react";
import Images from "./Images";

class Categories extends React.Component {
  state = {
    categories: ["sleeping", "eating", "standing"],
    selectedCategory: ""
  };

  selectCategory = category => {
    this.setState(
      {
        selectedCategory: category
      },
      () => console.log(this.state.selectedCategory)
    );
  };
  render() {
    const categories = this.state.categories;
    const selectedCategory = this.state.selectedCategory;
    return (
      <div>
        {categories.map(category => {
          return (
            <div onClick={() => this.selectCategory(category)}>{category}</div>
          );
        })}
        <Images category={this.state.selectedCategory} />
      </div>
    );
  }
}

export default Categories;

Images.js

import React from "react";

const catPictures = [
  {
    id: 1,
    link:
      "https://www.catster.com/wp-content/uploads/2017/07/gray-and-white-cat-asleep-with-whiskers-out.jpg",
    category: "sleeping"
  },
  {
    id: 2,
    link: "https://i.ytimg.com/vi/MVV_HXtEbLo/hqdefault.jpg",
    category: "standing"
  },
  {
    id: 3,
    link:
      "https://www.catster.com/wp-content/uploads/2015/06/cat-eating-plate-shutterstock_92543212.jpg",
    category: "eating"
  }
];

const Images = props => {
  return (
    <div>
      {catPictures
        .filter(cat => cat.category == props.category)
        .map(cat => (
          <img src={cat.link} />
        ))}
    </div>
  );
};

export default Images;

以下是沙箱： https://codesandbox.io/s/ovp06w562q

如果您有任何疑问，请告诉我。

Answer 2

您的图像组件不知道当前选择了哪个类别。传递通过类别组件中的onClick方法更新的当前选定类别，然后使用条件检查地图中的 category 变量是否与作为传递给Image Component的类别相同。

Answer 3

    <div>
      {images.map(img => {
        let { id, link, category } = img;
        category === 'category'
        ? return (
            <div key={id}>
              <Image saved="true" cats={link} alt="icons" />
            </div>
        )
        : null
      })}
    </div>

您可以这样做。映射所有图像，仅显示与该类别匹配的图像。

如何过滤对象数组并使该值与React中另一个数组的值匹配？

3 个答案: