在 React JS 中过滤嵌套数组答案

【问题标题】：Filtering Nested Arrays in React JS在 React JS 中过滤嵌套数组
【发布时间】：2020-09-15 01:12:01
【问题描述】：

我正在尝试按参与者姓名过滤对话列表。参与者名称是参与者列表中的属性，参与者列表包含在对话列表中。

到目前为止，我已经通过尝试嵌套过滤器来解决这个问题：

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。
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;

【问题讨论】：

“但是，filteredConvos 没有正确呈现以反映新过滤的数组。”是什么意思？你的意思是HangoutList没有更新？
@cbr 是的。 HangoutList 组件不会重新渲染 filteredConvos 我已经通过了它。看看那个组件也会有帮助吗？但是，我在过滤器块之后放置了console.log(filteredConvos)，filteredConvos 保持不变。所以我相信问题在传递给HangoutList之前就出现了。
是的，也包括它。
@cbr 更新了！谢谢你的建议。
啊，发现了。用作外部过滤器条件的内部 .filter。它返回一个数组，这在 JS 中是真实的。请改用.some。

标签： javascript arrays reactjs filter nested

【解决方案1】：

内部.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;
  })
})

【讨论】：