如何对反应中的表内容应用过滤器

Question

import React, { Component } from 'react';

import {Doughnut} from "react-chartjs-2"

import {bindActionCreators} from "redux";
import {connect} from 'react-redux';

import {fetchBeacons} from '../actions/';

const DummyDoughnutData = {
  labels: ['beacon 1 - zone a', 'beacon 2 - zone c', 'beacon 3 - zone a', 'beacon 4 - zone b', 'beacon 5 - zone b'],
  datasets: [
    {
      borderColor: 'rgba(255,255,255,.55)',
      data: [ 30, 9, 17, 22, 11],
      backgroundColor: [
		'#063e70',
		'#107bb5',
		'#1A1C1D',
		'#666666',
		'#2F4F4F'

		]
    }
  ],
};


// const beacons=[
//         {zone:"zone a", status: "active", _id:1},
//         {zone:"zone c", status: "active", _id:2},
//         {zone:"zone a", status: "active", _id:3},
//         {zone:"zone b", status: "active", _id:4},
//         {zone:"zone b", status: "active", _id:5},
//         {zone:"zone b", status: "active", _id:6},
//         {zone:"zone c", status: "active", _id:7}
// ];

// class BeaconZoneRow extends Component {
//     render() {
//         return (
//             <tr>
//                 <th colSpan="2">
//                     {this.props.zone}
//                 </th>
//             </tr>
//         )

//     }

// }

class BeaconRow extends Component {
    render() {
        return (
            <tr>
                 <td>{this.props.beacon.name}</td>
                <td>{JSON.stringify(this.props.beacon.status)}</td>
                <td> {this.props.beacon.zone.name} </td>
            </tr>
        )
    }
}

class BeaconList extends Component {

    // Sort = (prop) => { return (a,b) => a[prop].localeCompare(b[prop])};

    render() {
        const rows = [];

        this.props.beacons.map( beacon => {
            return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)
        });

        return (
            <div className="col-lg-6">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Zone</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        )


    }
}

class BeaconDoughnutAnalysis extends Component {
    render() {
        return (
            <div className="col-lg-6">
                <Doughnut data={DummyDoughnutData} />
                <br/>
                <center>visits</center>
            </div>
        )
    }
}


class BeaconListComponent extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(){
    this.props.router.push('/new-beacon');
  }

  componentWillMount = () => {
        this.props.fetchBeacons();
    };


    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-sm-5">
                        <button className="btn btn-sm btn-info" onClick={this.handleSubmit}> Add Beacon</button>
                    </div>
                </div>
                <br/>
                { this.props.beacons && this.props.beacons.length > 0 ?
                    <div className="row">
                        <BeaconList beacons={this.props.beacons}/>
                        <BeaconDoughnutAnalysis/>
                    </div> :
                    <center><h1>...Loading</h1></center>
                }
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        beacons: state.beacons
    }
}


function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchBeacons: fetchBeacons}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(BeaconListComponent);

我从服务器获取数据，我想知道如何使用react redux过滤表中的数据 上面显示的代码使用哪个表显示，我想过滤其内容

Answer 1

假设您将区域作为BeaconList组件的道具提供，您只需在下面的映射时提供检查

class BeaconList extends Component {

    // Sort = (prop) => { return (a,b) => a[prop].localeCompare(b[prop])};

    render() {
        const rows = [];
        //Assuming you are filtering based on zone and you are giving the zone you want to filter as a prop zone

        this.props.beacons.map( beacon => {
            if(beacon.zone === this.props.zone) {
              return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)
            }
        });

        return (
            <div className="col-lg-6">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Zone</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        )


    }
}

我希望这会有所帮助