在 Gatsbyjs 中返回时保留先前的表单数据

Question

我在 Gatsbyjs 中有一个搜索页面，其中一个过滤器表单位于侧边栏中，具有多个选项。该页面是使用模板从 node.js 生成的，其中产品列表和初始过滤器状态是从页面上下文传递的。

当用户单击过滤后的产品并导航到产品页面，然后按下后退按钮时，表单会重置，用户必须重新进行所有选择。我试图将过滤器选择提升到本地存储，但我如何区分用户是使用后退按钮还是通过其他 link 从菜单选择导航到搜索页面，例如？这里的代码：

import * as React from 'react'
import { useState } from 'react'
import Layout from '../../components/layout'
import ProductList from '../../components/product-list'


const ProductPage = (props) => {
    const { products, filter, breadcrumb } = props.pageContext
    const {location} = props
    const initialFilter = {
      brands: [],
      types: [],
      ages: [],
      breeds: [],
      features: [],
      petTypes: [],
    
  }
  console.log(props)
  const filtered = Object.assign({},initialFilter,filter)
  const [checked, setChecked] = useState(filtered)
    

  const handleChange = (event, group) => {
      let checkedOptn = [...checked[group]]
      setChecked({
          ...checked,
          [group]: checkedOptn.indexOf(event.target.name) > -1 ? checkedOptn.filter(item => item !== event.target.name) :
              [...checkedOptn, event.target.name]

      })
  }
    
    const pageTitle = () => {
      if (location.pathname==='/urunler/kedi') {return 'Kedi Ürünlerimiz'}
      if (location.pathname==='/urunler/kopek') {return 'Köpek Ürünlerimiz'}
      return 'Ürünlerimiz'
    }
    
    return (
    <Layout location={location} pageTitle = {pageTitle()} crumbs={breadcrumb.crumbs}>
       <ProductList products = {products} checked={checked} handleChange={handleChange}/>
    </Layout>
    )
}

export default ProductPage

这个问题有更好的方法吗？谢谢，

Answer 1

我最终在过滤器上设置了一个 onClick 侦听器，如果用户单击它，它将创建一个查询字符串并导航到同一页面，但带有查询参数。

然后在页面加载时，我读取了包含查询的 location.search，然后解析查询并根据查询设置页面状态。这样，当用户刷新页面或导航到另一个页面并使用返回按钮返回原始页面时，所选过滤器将被保留。

这里是代码：

const ProductPage = (props) => {
    const { products, breadcrumb } = props.pageContext
    const {location} = props
    const filter = qs.parse((location.search).substring(1))
    
    const initialFilter = {
      brands: [],
      types: [],
      ages: [],
      breeds: [],
      features: [],
      petTypes: [],
  }
  const filtered = Object.assign({},initialFilter,filter)
  const handleChange = (event, group) => {
      let checkedOptn = [...filtered[group]]
      let optionsSelected = {
        ...filtered,
        [group]: checkedOptn.indexOf(event.target.name) > -1 ? checkedOptn.filter(item => item !== event.target.name) :
            [...checkedOptn, event.target.name]

    }
    let queryString = qs.stringify(optionsSelected)
    console.log(queryString)
    const path = queryString.length > 0 ? `/urunler?${queryString}` :'/urunler'
      navigate(path)
  }
    
    const pageTitle = () => {
      if (location.pathname==='/urunler/kedi') {return 'Kedi Ürünlerimiz'}
      if (location.pathname==='/urunler/kopek') {return 'Köpek Ürünlerimiz'}
      return 'Ürünlerimiz'
    }
    
    return (
    <Layout location={location} pageTitle = {pageTitle()} crumbs={breadcrumb.crumbs}>
       <ProductList products = {products} checked={filtered} handleChange={handleChange}/>
    </Layout>
    )
}

export default ProductPage

在 Gatsbyjs 中返回时保留先前的表单数据

Preserving prior form data when navigating back in Gatsbyjs

reactjs

gatsby