javascript - 在 React 中过滤数组中的数组

Question

import React, { Component } from "react"
import {
  StaticQuery,
  grahpql, 
  Link 
} from "gatsby"
import {
  StyledFilter,
  StyledLine
} from "./styled"

class Filter extends Component {

  render() {

    const { data } = this.props
    const categories = data.allPrismicProjectCategory.edges.map((cat, index) => {
      return (
        <a
          key={index}
          onClick={() => this.props.setFilterValue(cat.node.uid)}
        >
          {cat.node.data.category.text}
        </a>
      )
    })

    return (
      <StyledFilter>
        <div>
          Filter by<StyledLine />
          <a
            // onClick={() => {this.props.filterProjects("all")}}
          >
            All
          </a>
          {categories}
        </div>
        <a onClick={this.props.changeGridStyle}>{this.props.gridStyleText}</a>
      </StyledFilter>
    )
  }

}

export default props => (
  <StaticQuery
    query={graphql`
    query {
      allPrismicProjectCategory {
        edges {
          node {
            uid
            data {
              category {
                text
              }
            }
          }
        }
      }
    }
    `}
    render={data => <Filter data={data} {...props} />}
    />
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在使用具有项目页面的 Gatsby 和 Prismic 开发 React 应用程序。默认情况下，它会列出所有项目，但在页面顶部会出现一个按类别选择的过滤器(只是一堆 <a> 标签)。

我的页面包含一个 <Filter />组件以及几个<GridItem />我正在映射的组件并从 CMS 加载一些 Prop 。

我遇到困难的部分是按类别过滤。

当我的页面组件安装时，它会将所有项目添加到我的 filteredItems 中状态。

当用户点击顶部的过滤器时，它设置为我的默认值 filterValue来自 "all" 的状态到相应的值。之后，我首先需要映射项目数组，并在该数组中映射类别(每个项目可以属于多个类别)。

我的想法基本上是如果一个值(uid)匹配我的新this.state.filterValue它返回对象并将其添加到我的 filteredItems状态(当然删除不符合此条件的)。

这是我的页面组件的样子(为了更好的可读性进行了清理，底部代码段中的完整代码):

class WorkPage extends Component {

  constructor(props) {
    super(props)
    this.state = {
      filterValue: "all",
      filteredItems: []
    }
    this.filterProjects = this.filterProjects.bind(this)
  }

  filterProjects = (filterValue) => {
    this.setState({ filterValue: filterValue }, () => 
      console.log(this.state.filterValue)
    )
    // see a few of my approaches below
  }

  componentDidMount() {
    this.setState({
      filteredItems: this.props.data.prismicWork.data.projects
    })
  }

  render() {

    const projectItems = this.props.data.prismicWork.data.projects && this.props.data.prismicWork.data.projects.map((node, index) => {
      const item = node.project_item.document["0"].data
      const categories = node.project_item.document["0"].data.categories.map(cat => {
        return cat.category_tag.document["0"].uid
      })

      return (
        <GridItem
          key={index}
          categories={categories}
      moreContentProps={moreContentProps}
        />
      )
    })

    return (
      <LayoutDefault>
        <Filter
          filterProjects={this.filterProjects}
        />
    {projectItems}
      </LayoutDefault>

    )
  }

}

我尝试了很多东西，我无法一一列举，但这里有一些例子:

这种方法总是返回一个包含 10 个对象的数组(我有 10 个项目)，有时会返回与 this.state.filterValue 不匹配的对象是空对象，有时它们仍会返回其全部数据。

let result = this.state.filteredItems.map(item => {
  return item.project_item.document["0"].data.categories.filter(cat => cat.category_tag.document["0"].uid === this.state.filterValue)
})
console.log(result)

之后，我尝试直接在父项上进行过滤(如果有意义的话)并使用 indexOf ，但这总是控制台记录一个空数组...

let result = this.state.filteredItems.filter(item => {
  return (item.project_item.document["0"].data.categories.indexOf(this.state.filterValue) >= 0)
})
console.log(result)

另一种方法是这种(天真的)方法，首先映射项目，然后映射类别以找到匹配值。这将返回 undefined object 的数组。

let result = this.state.filteredItems.map(item => {
  item = item.project_item.document["0"].data.categories.map(attachedCat => {
    if (attachedCat.category_tag.document["0"].uid === this.state.filterValue) {
      console.log(item)
    }
  })
})
console.log(result)

除此之外，我什至不确定我的方法(有一个 filteredItems 状态，根据过滤器是否匹配相应的类别进行更新)是好的还是“正确的”React 方式。

老实说，非常感谢任何提示或帮助。

import React, { Component } from "react"
import { graphql } from "gatsby"
import LayoutDefault from "../layouts/default"
import { ThemeProvider } from "styled-components"
import Hero from "../components/hero/index"
import GridWork from "../components/grid-work/index"
import GridItem from "../components/grid-item/index"
import Filter from "../components/filter/index"

class WorkPage extends Component {

  constructor(props) {
    super(props)
    this.state = {
      filterValue: "all",
      filteredItems: [],
      isOnWorkPage: true,
      showAsEqualGrid: false
    }
    this.filterProjects = this.filterProjects.bind(this)
    this.changeGridStyle = this.changeGridStyle.bind(this)
  }

  changeGridStyle = (showAsEqualGrid) => {
    this.setState(prevState => ({
      showAsEqualGrid: !prevState.showAsEqualGrid,
      isOnWorkPage: !prevState.isOnWorkPage
    }))
  }

  filterProjects = (filterValue) => {
    this.setState({ filterValue: filterValue }, () => 
    console.log(this.state.filterValue)
    )


    let result = this.state.filteredItems.filter(item => {
      return (item.project_item.document["0"].data.categories.toString().indexOf(this.state.filterValue) >= 0)
    })
    console.log(result)
  } 

  componentDidMount() {
    this.setState({
      filteredItems: this.props.data.prismicWork.data.projects
    })
  }

  render() {

    const projectItems = this.props.data.prismicWork.data.projects && this.props.data.prismicWork.data.projects.map((node, index) => {
      const item = node.project_item.document["0"].data

      const categories = node.project_item.document["0"].data.categories.map(cat => {
        return cat.category_tag.document["0"].uid
      })

      return (
        <GridItem
          key={index}
          isSelected="false"
          isOnWorkPage={this.state.isOnWorkPage}
          isEqualGrid={this.state.showAsEqualGrid}
          projectURL={`/work/${node.project_item.uid}`}
          client={item.client.text}
          tagline={item.teaser_tagline.text}
          categories={categories}
          imageURL={item.teaser_image.squarelarge.url}
          imageAlt={item.teaser_image.alt}
        />
      )
    })

    return (
      <ThemeProvider theme={{ mode: "light" }}>
        <LayoutDefault>
          <Hero
            introline="Projects"
            headline="Art direction results in strong brand narratives and compelling content."
          />
          {/* {filteredResult} */}
          <Filter
            filterProjects={this.filterProjects}
            changeGridStyle={this.changeGridStyle}
            gridStyleText={this.state.showAsEqualGrid ? "Show Flow" : "Show Grid"}
          />
          <GridWork>
            {projectItems}
          </GridWork>
        </LayoutDefault>
      </ThemeProvider>
    )
  }

}

export default WorkPage

export const workQuery = graphql`
  query Work {
    prismicWork {
      data {
        page_title {
          text
        }

        # All linked projects
        projects {
          project_item {
            uid

            # Linked Content
            document {
              type
              data {
                client {
                  text
                }
                teaser_tagline {
                  text
                }
                teaser_image {
                  url
                  alt
                  xlarge {
                    url
                  }
                  large {
                    url
                  }
                  medium {
                    url
                  }
                  squarelarge {
                    url
                  }
                  squaremedium {
                    url
                  }
                  squaresmall {
                    url
                  }
                }

                categories {
                  category_tag {
                    document {
                      uid
                      data {
                        category {
                          text
                        }
                      }
                    }
                  }
                }

              }
            }
          }
        }
      }
    }
  }
`

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

所以至少有两件事。

1. 在你的filterProjects()你首先设置state.filterValue然后在 filteredItems.filter() 中使用它.这可能行不通，因为 React 不执行 setState()始终立即，以优化性能。因此，您可能正在根据 state.filterValue 的先前值进行过滤.相反，只需使用 filterValue ，你传递给 filterProjects() .

setFilterValue = (filterValue) => {
    this.setState({filterValue}) // if key and variable are named identically, you can just pass it into setState like that
}

// arrow function without curly braces returns without return statement
filterProjects = (projects, filterValue) =>
    projects.filter(item => item.project_item.document[0].data.categories.toString().includes(filterValue))

1. 你应该 return filterProjects() 的结果，因为您需要根据 filteredItems 进行渲染那么，当然。但实际上没有必要将过滤结果放入state中。 .您可以申请filterProjects()在 props 上直接，就在render()内.这就是为什么你应该归还它们。也分开setState进入另一个函数，您可以将其传递给 <Filter/>成分。

还有一个建议:使用解构使您的代码更具可读性。对于您和任何使用它的人。

render() {
    const { projects } = this.props.data.prismicWork.data // this is
    const { filterValue } = this.state                    // destructuring
    if (projects != undefined) {
        this.filterProjects(projects, filterValue).map((node, index) => {
        // ...

// Filter component
<Filter filterProjects={this.setFilterValue} />

That way you trigger a rerender by setting the filterValue, because it resides in this.state, and the render function depends on this.state.filterValue.

请尝试一下，如果还有其他问题，请告诉我。