如何在表中的內容，將過濾器中反應

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: [ 
 
\t \t '#063e70', 
 
\t \t '#107bb5', 
 
\t \t '#1A1C1D', 
 
\t \t '#666666', 
 
\t \t '#2F4F4F' 
 

 
\t \t ] 
 
    } 
 
    ], 
 
}; 
 

 

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

我從服務器獲取數據，我想知道如何使用過濾表中的數據反應終極版 代碼如上所示使用哪個表正在顯示，我想過濾其內容

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


    } 
} 

我希望這有助於