数组 - Javascript - 使用输入搜索过滤对象数组

Question

我正在尝试使用 react 过滤列表，但令人惊讶的是，对于这样一个常见的任务，在网上找不到任何东西来帮助我实现这一点。

我有一组用户，然后我想过滤它们（从名称开始 - 我可以按年龄进行过滤）。 该数组在我的 redux 存储中，如下所示。

let users = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

我的整个组件如下所示。

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            users: this.props.users

        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users
        });

    }

    filterList(event) {

        let users = this.state.users;
        users = users.filter(function(user){
        //unsure what to do here
        });
        this.setState({users: users});
    }

  render(){

    const userList = this.state.users.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        { userList }
      </ul>
    );

  }
}

Answer 1

如果您想过滤name，您可以使用.filter 与.startsWith 或.indexOf 一起为给定用户返回真或假。

您还在 onChange 事件上设置了一个新的用户列表，这迟早会导致一个空数组。这里我使用了仅由道具改变的user 状态，以及在击键发生时改变的filteredUsers。

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      users: this.props.users,
      filteredUsers: this.props.users,
      q: ''
    };

    this.filterList = this.filterList.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState(
      {
        users: nextProps.users,
        filteredUsers: nextProps.users
      },
      () => this.filterList()
    );
  }

  onChange(event) {
    const q = event.target.value.toLowerCase();
    this.setState({ q }, () => this.filterList());
  }

  filterList() {
    let users = this.state.users;
    let q = this.state.q;

    users = users.filter(function(user) {
      return user.name.toLowerCase().indexOf(q) != -1; // returns true or false
    });
    this.setState({ filteredUsers: users });
  }

  render() {
    const userList = this.state.filteredUsers.map(user => {
      return <li>{user.name} {user.age}</li>;
    });

    return (
      <div>
        <input
          type="text"
          placeholder="Search"
          value={this.state.q}
          onChange={this.onChange}
        />
        <ul>
          {userList}
        </ul>
      </div>
    );
  }
}

const userList = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

ReactDOM.render(<Test users={userList} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

您还需要一个state 变量来存储搜索结果，用相同的数据初始化该变量，一旦用户键入任何内容，将过滤后的数据存储在其中，试试这个：

let users = [
  {
    name: 'Raul',
    age: 29
  },
  {
    name: 'Mario',
    age: 22
  }
];

class Test extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            users: users,
            result: users,
        };

        this.filterList = this.filterList.bind(this);

    }

    componentWillReceiveProps(nextProps) {

        this.setState({
            users: nextProps.users,            
        });

    }

    filterList(event) {
        let value = event.target.value;
        let users = this.state.users, result=[];
        result = users.filter((user)=>{
            return user.name.toLowerCase().search(value) != -1;
        });
        this.setState({result});
    }

  render(){

    const userList = this.state.result.map((user) => {
      return <li>{user.name} {user.age}</li>;
    });

    return(<div>
      <input type="text" placeholder="Search" onChange={this.filterList}/>
      <ul>
        {userList}
      </ul>
      </div>
    );

  }
}

ReactDOM.render(<Test/>, document.getElementById('app'))

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


<div id='app'></div>

Answer 3

let datas =[
  {   
      "id":1,
      "title":"Ucat",
      "handle":"mi"
  },
  {
      "id":2,
      "title":"Acat",
      "handle":"csk"
  },
  {
      "id":3,
      "title":"Vcat",
      "handle":"kkr"
  },
  {
      "id":4,
      "title":"Atar",
      "handle":"pkbs"
  }];
const [search, setSearch] =useState(datas);
const handleInputChange = (e) => {
var dm = e.target.value;
var str =dm.toString();
var debug = datas.filter(x=> x["title"].toLowerCase().includes(str));
setSearch(debug);};


<input type="text"  onChange={handleInputChange}/>
{search.map((item)=>(
    <div key={item.id}>
        <ul>
            <li>
            {item.handle} 
            <br/>
            {item.title}
            </li>
        </ul>
    </div>
))};
  
  

Answer 4

如果您想过滤列表，您必须有一个过滤条件。例如你有一个变量let filterAge = 18;

在这种情况下，您可以使用该值过滤用户列表

let users = users.filter(function(user){
    //return all users older or equal to filterAge
    return user.age >= filterAge;        
});

函数的每个结果等于 true，都将添加到 users 变量中。虚假的回报将把它排除在外。如何确定真/假取决于您。硬编码它（不是很有用），一个简单的等号语句（如上）或一个做高等数学的函数。你的选择。

Answer 5

这样对我来说总是很有效。

const [data, setData] = useState([{name: 'Kondo'}, {name: 'Gintoki'}])

const handleFilterFilesTable = () => {
    return data
      .filter((element) => {
        if (searchText !== "") {
          return element?.name?.toLowerCase()?.includes(searchText?.toLowerCase())
        }

        return element
      })
  }

// ...
return (
 //...
 <Table data={handleFilterFilesTable()} />
)

这样我就可以应用多个过滤器一起工作，只需像这样扩展 filter 方法

// ...
return data.filter().filter().filter()//...
// ...