数组 - 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一起使用，为给定用户返回 true 或 false。

您还在 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变量中。 错误的回报将把它排除在外。 您如何确定真/假取决于您。 硬编码它（不是很有用），一个简单的 equals 语句（如上）或一个进行更高数学运算的函数。 你的选择。

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()} />
)

这样我就可以简单地通过像这样扩展过滤器方法来应用多个过滤器一起工作

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