ReactJS - onClick не получает идентификатор из массива

Question

Я очень новичок в ReactJS и мне нужно несколько советов о том, как заставить работать приведенный ниже onClick (в переменной CategoryFilter).

Существует два вызова API - один для категорий и один для элементов, принадлежащих к одной или нескольким из этих категорий.

Когда я отображаю категории, они являются ссылками, и при щелчке по ссылке на категорию следует выбрать идентификатор этой категории, а затем передать его фильтру, чтобы показать только элементы, принадлежащие категории.

На данный момент ниже не берется идентификатор, поэтому продукты не отображаются. Я работаю над этим в течение двух дней и хожу по кругу, поэтому любая помощь будет высоко ценится!

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 не совпадает.

Это означает, что вы всегда будете возвращать все 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!!
...

Вот рабочий пример:

Дайте мне знать, помогло ли это!