在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 App。默认情况下，它会列出所有项目，但在页面顶部会显示一个过滤器，以按类别选择（只是一堆<a>标签）。

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

我苦苦挣扎的部分是按类别进行过滤。

安装页面组件时，它将所有项目添加到我的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)

另一种方法是这种（幼稚的）方式，先在项目上映射，然后在类别上映射以找到匹配的值。这将返回未定义对象的数组。

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} />

  

这样，您可以通过设置filterValue来触发重新渲染，因为它   驻留在this.state中，并且render函数取决于   this.state.filterValue。

请尝试一下，并告诉我是否还有其他问题。