React JS：相同 JSON 数据的两个过滤器

Question

问题总结 我有两个输入要过滤数据：

1. 过滤 videoTitle 和 teacherName
2. 标签过滤（JSON 中的嵌套数组）

我无法让tag 过滤器工作。它目前似乎根本没有过滤 JSON，只是返回所有数据。

上下文 目前已在第一个过滤器（videoTitle 和教师姓名）上成功提取和过滤数据。

环境：MacOS 11.2.3、React 17.0.1、VSCode

我尝试了什么？ 获得条件的可见性以查看返回的内容。似乎条件是通过标签数组过滤，但返回不起作用。

代码

获取数据和映射

import React, { Component } from 'react';
import axios from 'axios';

class Search extends Component {
  state = {
    error: false,
    searchQuery: "",
    tagQuery: "",
    results: [],
    loadingData: false,
  }

  getInfo = () => {
    this.setState({ loadingData: true })
    axios.get('https://**********')
    .then(({ data }) => {
      data.sort((a, b) => b.averageUserRating - a.averageUserRating);
        this.setState({ results: data });
        this.setState({ loadingData: false })
    })
    .catch(() => this.setState({ error: true }))
  }

2x 更改处理程序（每个输入一个）

  handleSearchInputChange = () => {
    this.setState({
      searchQuery: this.search.value
    }, () => {
      if (this.state.searchQuery && this.state.searchQuery.length > 1) {
        if (this.state.searchQuery.length % 2 === 0) {
          this.getInfo()
        }
      } else if (this.state.searchQuery === "") {
          this.setState({ results: [] })
      }
    })
  }

  handleTagInputChange = () => {
    this.setState({
      tagQuery: this.tag.value
    }, () => {
      if (this.state.tagQuery && this.state.tagQuery.length > 1) {
        if (this.state.tagQuery.length % 2 === 0) {
          this.getInfo()
        }
      } else if (this.state.tagQuery === "") {
          this.setState({ results: [] })
      }
    })
  }

渲染方法

render() {

    const searchForTutorials = this.state.results.filter((data) => {
      if (this.state.searchQuery == null)
        return data;
      else if (data.videoTitle.toLowerCase().includes(this.state.searchQuery.toLowerCase()) || data.teacherName.toLowerCase().includes(this.state.searchQuery.toLowerCase())) {
        return data;
      }
    }).map(data => {
      return (
        <div>
          <ul>
            <li style={{position:'relative', left: '10vh'}}>
              <span style={{paddingRight:'10px'}}>{data.videoTitle}</span>
              <span style={{paddingRight:'10px'}}>{data.videoUrl}</span>
              <span style={{paddingRight:'10px'}}>{data.teacherName}</span>
              <span style={{paddingRight:'10px'}}>{data.tags.map(word => word)}</span>
              {/* <span style={{paddingRight:'10px'}}>{data.averageUserRating}</span> */}
            </li>
          </ul>
        </div>
      )
    })

    const searchForTags = this.state.results.filter((data) => {
      if (this.state.tagQuery == null)
        return data;
      else if (data.tags.map(word => word.toLowerCase()).includes(this.state.tagQuery.toLowerCase())) {
        return data;
      }
    }).map(data => {
      return (
        <div>
          <ul>
            <li style={{position:'relative', left: '10vh'}}>
              <span style={{paddingRight:'10px'}}>{data.videoTitle}</span>
              <span style={{paddingRight:'10px'}}>{data.videoUrl}</span>
              <span style={{paddingRight:'10px'}}>{data.teacherName}</span>
              <span style={{paddingRight:'10px'}}>{data.tags.map(word => word)}</span>
              {/* <span style={{paddingRight:'10px'}}>{data.averageUserRating}</span> */}
            </li>
          </ul>
        </div>
      )
    })

    return (
      <form>
        <input
          type="text"
          placeholder="Search for Tutorials..."
          ref={input => this.search = input}
          onChange={this.handleSearchInputChange}
          />

          <input
            type="text"
            placeholder="Search using Tags..."
            ref={input => this.tag = input}
            onChange={this.handleTagInputChange}
          />

          {this.state.loadingData && <button>Loading...</button>}
          {!this.state.loadingData &&
          <button 
            type="button" 
            onClick={() => this.getInfo() }>
            <span>Refresh Data</span>
      </button>}
          {searchForTutorials}
          {searchForTags}
      </form>

    )
  }
}

export default Search;

Answer 1

searchForTags过滤方法中，第二个if：

else if (data.tags.map(word => word.toLowerCase()).includes(this.state.tagQuery.toLowerCase())) {

我不确定你是否打算在这里，但你正在返回一个布尔值数组 [true, false, true, ...] 值，它总是评估为真。您应该在映射值上使用 run some function 以查找是否有任何相关标签

例如：

const searchForTags = this.state.results.filter((data) => {
  if (this.state.tagQuery === null) {
    return true;
  }
  return data.tags
    .map(word => word.toLowerCase())
    .some(word => word === this.state.tagQuery.toLowerCase()); // stops at the first match found and return true
}

请记住，当您使用 Array.filter 时，您的函数应该返回一个布尔值，以便保留它或从过滤中丢弃。