применение состояния фильтра с реакцией

Question

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

Я новичок в реакции и видел разные способы реализации фильтров, но я не смог найти ничего подходящего для этого, в частности.Состояние тем должно обновляться для каждой выбранной группы.Группы выбраны здесь: -

Любая помощь будет отличной, спасибо

<a className="navigator-tags">
    {item.name}
</a>

Код ответа:

import * as React from 'react';
import './PracticeAreas.css';
import IReportGroup from 'src/model/IReportGroup';
import { IReportTopicSummary, IReportTopic } from 'src/model/IReport';

export interface IReportTopicSummary {
    id: string,
    name: string
}

export interface IReportTopic {
    id: string
    name: string
}


interface IOwnProps {
    type: 0
}

interface IOwnState {
    groups: IReportGroup[],
    topics: IReportTopic[],
}

class PracticeAreas extends React.Component<IOwnProps, IOwnState> {

    constructor(props: IOwnProps) {
        super(props);
        this.state = {
          groups: [],
          topics: []
        }
        this.data();
      }

    public render() {

        const { topics } = this.state;

        return topics ?
            this.renderData(topics) :
            this.renderLoading();
    }

    public renderLoading () {
        return <div>Loading...</div>;
    }

    public renderData(data: any) {
        if (data && data.length > 0) {
            return (
            <div className="col-md-12 practiceAreas">
                <h1>Practice Areas</h1>
                <div className="item-container plain-bg selection-refinement">
                    <div className="refinement-search">
                        <input type="text" value="" placeholder="What are you looking for?" />
                    </div>
                </div>

                <ul className="list-inline groupedTags">
                    {this.state.groups.map((item,i) => 
                        <li key={i}>
                            <a className="navigator-tags">
                                {item.name}
                            </a>
                        </li>
                    )}
                </ul>

                <div className="row practiceAreasContainer">
                    {this.state.topics.map((item,i) => 
                        <div key={i} className="result">
                            <div className="col-md-6 result-item">
                                <div className="item-container default shadowed item-content highlight row">
                                    <div className="col-sm-12 no-padding">
                                        <p>Editor: <a href="#">John Sinclair</a>, <a href="#">Eric Draven</a>, <a href="#">Coco Zames</a></p>
                                        <p><a href="#">Beiten Burkhardt</a></p>
                                        <div className="row no-margin">
                                            <div className="col-12 col-sm-10 text-content">
                                                <h3>
                                                    <a href="#">{item.name}</a>
                                                </h3>
                                                <p className="summary">

                                                </p>
                                            </div>
                                            <div className="col-10 col-sm-2 links-container rhs">
                                                <a href="#">Compare</a>
                                                <div className="divider" />
                                                <a href="#">View</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
                <div className="row text-center">
                    <a className="lex-primary-btn medium-btn">Load more</a>
                </div>
            </div>
            );
        } else {
            return <div>No items found</div>;
        }
    }

    public data() {
        fetch(`...api/v2/navigator/reports/groups`, {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json"
            }})
        .then((res) => res.json()
        .then((data) => { 
            this.setState({ 
                groups: data.groups,
                topics: data.data
            });
        }));
    }
}

export default PracticeAreas

Пример данных

<ReportSelectionCriteriaResponse xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/">
    <Data xmlns:d2p1="http://schemas.datacontract.org/2004/07/">
        <d2p1:NavigatorReportSelection>
            <d2p1:About>test title 4</d2p1:About>
            <d2p1:Groups xmlns:d4p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
                <d4p1:guid>d21384b5-27be-4bfc-963d-0d2ad40dbbfb</d4p1:guid>
            </d2p1:Groups>
            <d2p1:Id>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d2p1:Id>
            <d2p1:Name>Test</d2p1:Name>
            <d2p1:ParentId i:nil="true"/>
            <d2p1:Selected>false</d2p1:Selected>
            <d2p1:Type>Topics</d2p1:Type>
            <d2p1:Visible>true</d2p1:Visible>
        </d2p1:NavigatorReportSelection>
        <d2p1:NavigatorReportSelection>
            <d2p1:About i:nil="true"/>
            <d2p1:Groups xmlns:d4p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays">
                <d4p1:guid>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d4p1:guid>
            </d2p1:Groups>
            <d2p1:Id>47cb7f1d-2267-426c-9f7f-0df3b9291fb7</d2p1:Id>
            <d2p1:Name>Another test topic</d2p1:Name>
            <d2p1:ParentId i:nil="true"/>
            <d2p1:Selected>false</d2p1:Selected>
            <d2p1:Type>Topics</d2p1:Type>
            <d2p1:Visible>true</d2p1:Visible>
        </d2p1:NavigatorReportSelection>
    </Data> 
    <Groups xmlns:d2p1="http://schemas.datacontract.org/2004/07/">
        <d2p1:NavigatorReportSelectionGroup>
            <d2p1:Focused>false</d2p1:Focused>
            <d2p1:Id>2fb2783c-f48e-4d49-8098-0d39e4a16e7a</d2p1:Id>
            <d2p1:Name>Allan's Test group</d2p1:Name>
            <d2p1:Order>0</d2p1:Order>
            <d2p1:Type>Topics</d2p1:Type>
        </d2p1:NavigatorReportSelectionGroup>
        <d2p1:NavigatorReportSelectionGroup>
            <d2p1:Focused>false</d2p1:Focused>
            <d2p1:Id>47cb7f1d-2267-426c-9f7f-0df3b9291fb7</d2p1:Id>
            <d2p1:Name>Another test topic group</d2p1:Name>
            <d2p1:Order>1</d2p1:Order>
            <d2p1:Type>Topics</d2p1:Type>
        </d2p1:NavigatorReportSelectionGroup>
    </Groups>
</ReportSelectionCriteriaResponse>

Answer 1

Один из способов реализации фильтра - просто сохранить текущую выбранную группу в состоянии:

this.state = {
   groups: [],
   topics: [],
   selectedGroup: ''
}

или, если выбранная группа указана другим способом (маршрут и т. Д.), Это может бытьprop.

Как только вы узнаете, что такое выбранная группа, вы можете применить фильтр в режиме реального времени и отображать только те темы, которые проходят через фильтр.Например:

this.state.topics.filter(topic => this.isTopicInCurrentGroup(topic)).map((item,i) => {
 // return your existing <div >( display for item)</div
})

Затем вы реализуете ту логику, которая вам понадобится, чтобы определить, входит ли тема в текущую группу, и вернуть true или false.Например:

isTopicInCurrentGroup = (topic) => { 
  return (topic.groupId === this.state.selectedGroup || !this.state.selectedGroup);
}