Фильтрация вложенных массивов в React JS - PullRequest
Новая
       5

Фильтрация вложенных массивов в React JS

2 голосов
/ 27 мая 2020

Я пытаюсь отфильтровать список разговоров по именам участников. Имена участников являются свойствами внутри списка участников, а список участников содержится в списке разговоров.

До сих пор я пытался решить проблему, пытаясь вложить фильтры: 

let filteredConvos = this.props.convos.filter((convo) => {
   return convo.conversation.conversation.participant_data.filter(
     (participant) => {
       return participant.fallback_name.toLowerCase().indexOf(
         this.state.searchTerm.toLowerCase()) !== -1;
     })
})

Похоже, это работает, поскольку я могу подтвердить (т.е. я поместил целую кучу console.logs в расширенную версию вышеупомянутого), что по мере обновления состояния searchTerm оно возвращает соответствие participant и соответствие convo. Однако filteredConvos неправильно отображается для отражения недавно отфильтрованного массива.

Я новичок в Javascript, React и Stack Overflow. Моя лучшая оценка заключается в том, что я неправильно передаю элементы отфильтрованного массива обратно в filteredConvos, но, честно говоря, у меня недостаточно опыта, чтобы знать.

Любая помощь приветствуется.

Дополнительный контекст:

  • Источник данных, с которым я работаю, - это файл JSON, предоставленный Google чата Hangouts в аккаунте.
  • HangoutSearch. js: 

    class HangoutSearch extends Component {
      constructor(props) {
        super(props);

        this.state = {
          searchTerm: ''
        };

        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) {
        this.setState({
          searchTerm: e.target.value
        });
      }

      render() {

        let filteredConvos = this.props.convos.filter((convo) => {
          return convo.conversation.conversation.participant_data.filter(
        (participant) => {
          return participant.fallback_name.toLowerCase().indexOf(
            this.state.searchTerm.toLowerCase()) !== -1;
        })
        })

        return(
          <div>
        <Form>
          <Form.Control
            placeholder='Enter the name of the chat participant'
            value={this.state.searchTerm}
            onChange={this.handleChange} />
        </Form>
        <HangoutList filteredConvos={filteredConvos}/>
          </div>
        );
      }
    }

    export default HangoutSearch;
  • HangoutList. js

    class HangoutList extends Component {

      render() {
        return(
          <ListGroup>
            {this.props.filteredConvos.map((convo) => {
              return (
                <ListGroup.Item key={convo.conversation.conversation.id.id}>
                  {convo.conversation.conversation.participant_data.map(
                    (participant) => {
                      return (
                        <span key={participant.id.gaia_id}>
                          {participant.fallback_name}
                        </span>
                      )
                    }
                  )}
                </ListGroup.Item>
              )
            })}
          </ListGroup>
        );
      }
    }

    export default HangoutList;

1 Ответ

1 голос
/ 28 мая 2020

Внутренний .filter всегда возвращает массив, который истинен в Javascript. Вместо этого вы можете использовать .some: 

let filteredConvos = this.props.convos.filter((convo) => {
  return convo.conversation.conversation.participant_data.some((participant) => {
    return participant.fallback_name.toLowerCase().indexOf( this.state.searchTerm.toLowerCase()) !== -1;
  })
})
...