Question

我有一个至少属于一个组的主题列表，每个主题可以有1个组或多个组。我正在使用react fetch返回包含这些主题和组列表的对象。该页面将组列表呈现为列表项，并在下面显示主题。我希望能够根据选择的组来过滤主题列表。我已经为返回的部分数据提供了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: ''
}

或者如果以其他方式（路线等）指定了选定的组，则它可能是道具。

一旦知道所选组是什么，就可以在主题迭代内实时应用过滤器，并且仅显示通过过滤器的主题。例如：

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);
}

通过react应用过滤器状态

1 个答案: