Question

我对ReactJS还是很陌生，需要一些指导来使下面的onClick起作用（在CategoryFilter变量中）。

有两个api调用-一个用于类别，一个用于属于其中一个或多个类别的项目。

当我显示类别是链接时，当单击类别链接时，它应该获取该类别ID，然后将其传递给过滤器以仅显示属于该类别的项目。

目前，以下内容未提取ID，因此没有产品显示。我已经为此进行了两天的工作，并且会绕圈转，所以任何帮助将不胜感激！

import _ from 'lodash';
import React, { Component } from 'react';
import './CatNav.css';
import axios from 'axios';



class TestPageFour extends React.Component {

  constructor () {
    super();

    this.state = {
      categories: [],
      items: [],
      selectedCategoryId: null
    };

    this.onSelectCategory = this.onSelectCategory.bind(this);
  }

  onSelectCategory(id) {
    this.setState({
      selectedCategoryId: id
    });
  }

  componentWillMount() {
    axios.get(`https://api.gousto.co.uk/products/v2.0/categories`)
      .then(res => {
        const allData = res.data;
        const categories = allData.data;
        this.setState({ categories: categories });
      });
    axios.get(`https://api.gousto.co.uk/products/v2.0/products?includes[]=categories&includes[]=attri`)
      .then(res => {
        const allDataItems = res.data;
        const items = allDataItems.data;
        this.setState({ items: items });
      })
  }


  render() {
    const { categories, items, selectedCategoryId } = this.state;
    const deafultCategory = _.first(categories);
    const selectedCategory = _.find(categories, i => i.id === selectedCategoryId) || deafultCategory;
    return (
      <div>
        <CategoryFilter categories={categories} onSelectCategory={this.onSelectCategory} />
        <ItemList items={items} selectedCategoryId={selectedCategoryId} />
      </div>
    );
  }
}


let CategoryFilter = ({ categories, onSelectCategory}) => {
  const links = categories.map(i => (
    <div key={i.id}>
      <a href={i.id} onClick={() => onSelectCategory(i.id)}>
        { i.title }
      </a>
    </div>
  ));
  return (
    <div>
      { links }
    </div>
  )
};

let ItemList = ({items, selectedCategoryId}) => {
  const currentItems = items
    .filter(i => {
      i.categories.map(category => {
        return category.id === selectedCategoryId;
      })})
    .map(i => (
      <div key={i.id}>
        { i.title }
      </div>
    ));
  return (
    <div>
      { currentItems }
    </div>
  );
};

export default TestPageFour

Answer 1

您缺少的是filter函数中ItemList方法内部的返回。

.filter(i => {
  // Here
  return i.categories.map(category => {
    return category.id === selectedCategoryId;
  })})
.map(i => (
 ...
));

但是这里的逻辑是不正确的。因为map方法内的filter方法将始终返回一个数组。而是使用fiter方法，这不是您想要的结果。您可以尝试这样的事情：

...
.filter(i => i.categories.filter(category => category.id === selectedCategoryId))
...

但这还不够。因为当您检查每个category.id中的item时，如果ids不匹配，则filter方法将返回空数组。

这意味着您将始终返回所有items

要解决此问题，应将boolean返回到上方的filter操作。

...
// Instead of this:
const currentItems = items.filter(i=> i.categories.filter(category => category.id === selectedCategoryId))

// Something like this:
const currentItems = items.filter(i=> {
   const categoryExists = i.categories.filter(category => category.id === selectedCategoryId))
   return categoryExists.length > 0;
}) // then map through and render them!!
...

这是一个有效的示例：

让我知道是否有帮助！

ReactJS-onClick不会从数组中获取ID

1 个答案: