배열 검색 - 자바 스크립트 - 입력 검색을 사용하여 객체 배열 필터링

Question

반응을 사용하여 목록을 필터링하려고하지만 놀랍게도 이러한 일반적인 작업을 수행 할 때 온라인으로 찾을 수 없습니다.

저는 필터를 통해 원하는 사용자 배열을 가지고 있습니다 (이름부터 시작하여 나이별로 필터링 할 수 있습니다). 배열은 내 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을 필터링하려면 과 함께 .startsWith 또는를 사용하여 지정된 사용자에 대해 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

목록을 필터링하려면 필터링 기준이 있어야합니다. 예를 들어 당신이

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

사실에 해당 기능에서 모든 결과를 사용하여 해당 값에 대한 사용자 목록을 필터링 할 수 있습니다이 경우 변수 let filterAge = 18;

이의 users 변수에 추가됩니다. 틀린 반환은 그것을 떠날 것이다. 진실/거짓을 어떻게 결정할 것인가는 당신에게 달렸습니다. 하드 코드 (매우 유용하지 않음), 간단한 equals 문 (위와 같음) 또는 더 높은 수학을 수행하는 함수. 너의 선택.

Answer 3

당신은 사용자가 아무것도 점에서 필터링 된 데이터를 저장 입력하면, 검색 결과를 저장 동일한 데이터에 의한 변수를 초기화하기 위해 한 번 더 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>