如何使用reactjs過濾多個數據的值？

Question

我是新手，想要為對象中的多個數據做搜索過濾器。 我試過過濾單個數據，代碼如下所示：

    var {Data, search} =this.state;
            search = this.state.search.trim().toLowerCase();
        if (search.length > 0) {
          Data= Data.filter(function(i) {
            return i.firstName.toLowerCase().match( search );

          });
        }

它工作得很好，但僅適用於 firstName。 但我的目標是過濾 lastName、Location 和 Skills。

這是代碼：

export default class DataView extends React.Component {
  constructor() {
    super();
    this.state = {
      Data: [],
      search: ""
    };
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch("api/Profile")
      .then(response => response.json())
      .then(data => {
        this.setState({
          Data: data.item1
        });
      });
  }
  handleSearch = e => {
    this.setState({ search: e.target.value });
  };

  render() {
    var { Data, search } = this.state;
    search = this.state.search.trim().toLowerCase();
    if (search.length > 0) {
      Data = Data.filter(function(i) {
        return i.firstName.toLowerCase().match(search);
      });
    }

    return (
      <div>
        <Segment className="p_segment">
          <Input
            icon="search"
            placeholder="Search..."
            className="a_Search"
            value={this.state.search}
            onChange={this.handleSearch}
          />
        </Segment>

        <Container className="p_view">
          {Data.map(View => {
            return (
              <Grid key={View.id}>
                <Grid.Row className=" p_header">
                  <Checkbox className="p_checkbox" />
                  <Header>
                    {" "}
                    {View.firstName} {View.lastName}{" "}
                  </Header>
                </Grid.Row>
                <Divider className="p_divider" />
                <Grid.Row>
                  <Icon name="marker" /> {View.location}
                  <Divider className="p_divider" />
                </Grid.Row>
                <Grid.Row>
                  <Grid.Column>
                    <div>
                      <div className="g_column">
                        {View.skillset.map(data => {
                          return (
                            <Label className="c_label">{data.skill}</Label>
                          );
                        })}
                      </div>
                    </div>
                  </Grid.Column>
                </Grid.Row>
              </Grid>
            );
          })}
        </Container>
      </div>
    );
  }
}

任何人都可以在此查詢中幫助我嗎？

Answer 1

你可以簡單地做一個 OR 語句

return i.firstName.toLowerCase().match( search ) || i.skills.toLowerCase().match( search ) || i.location.toLowerCase().match( search );

或者如果你想搜索完整的對象

return JSON.stringify(i).toLowerCase().match(search);

Answer 2

如果您一直在追求跨對象值不區分大小寫的部分匹配，您可以簡單地將Object.values()提取到一個數組中，並將Array.prototype.some()與Array.prototype.filter()一起使用以與您所做的類似的方式：

 const stateData = [{ firstName: 'Stephen', lastName: 'Smith', location: 'Johannesburg', //match by location skills: 'golf' },{ firstName: 'George', lastName: 'Washington', location: 'Philadelphia', skills: 'majohng' //match by skills },{ firstName: 'Dummy', lastName: 'Dummyson', location: 'Dummywille', skills: 'dummy' }], searchString = 'jo', searchResult = stateData.filter(record => Object .values(record) .some(prop => prop .toLowerCase() .includes(searchString.toLowerCase()) ) ) console.log(searchResult)

 .as-console-wrapper{min-height:100%;}

Answer 3

一些記號。

var { Data, search } = this.state; // don't use var
    search = this.state.search.trim().toLowerCase(); // don't do mutation
    if (search.length > 0) {
      Data = Data.filter(function(i) { // don't do mutation
        return i.firstName.toLowerCase().match(search);
      });
    }

1. 將result添加到狀態。
2. 使用componentDidUpdate 。
3. 檢查search字段是否已更改。
4. 做過濾。
5. 如果search字段為空，則重置result 。

 import React from "react"; export default class DataView extends React.Component { constructor(props) { super(props); this.state = { data: [], search: "", result: [], // [1] }; } componentDidMount() { this.fetchData(); } componentDidUpdate(prevProps, prevState) { // [2] const { search: prevSearch } = prevState; const { search: nextSearch, data } = this.state; if (prevSearch !== nextSearch) { // [3] const trimed = nextSearch.trim().toLowerCase(); const result = nextSearch.length > 0 ? data.filter(({ firstName, lastName }) => ( // [4] `${firstName} ${lastName}`.toLowerCase().includes(trimed) )) : []; // [5] this.setState({ result }); } } fetchData() { fetch("api/Profile") .then(response => response.json()) .then(({ item1 }) => { this.setState({ data: item1 }); }); } handleSearch = (e) => { this.setState({ search: e.target.value }); }; render() { const { data, search, result } = this.state; return ( <div> <Segment className="p_segment"> <Input icon="search" placeholder="Search..." className="a_Search" value={search} onChange={this.handleSearch} /> </Segment> <Container className="p_view"> {result.map((view) => { const { id, firstName, lastName, location, skillset, } = view; return ( <Grid key={id}> <Grid.Row className=" p_header"> <Checkbox className="p_checkbox" /> <Header> {` ${firstName} ${lastName} `} </Header> </Grid.Row> <Divider className="p_divider" /> <Grid.Row> <Icon name="marker" /> {location} <Divider className="p_divider" /> </Grid.Row> <Grid.Row> <Grid.Column> <div> <div className="g_column"> {skillset.map(({ skill }) => ( <Label className="c_label">{skill}</Label> ))} </div> </div> </Grid.Column> </Grid.Row> </Grid> ); })} </Container> </div> ); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>