前端过滤 React JS

Question

我已经过滤了产品并在提交搜索词时，使用 history.push() 属性在新页面中显示结果。

   import React, { useState } from 'react'; 
   import { useSelector } from 'react-redux';
   import { IoIosSearch } from 'react-icons/io';
   import { useHistory } from "react-router-dom";
   import './style.css';

  /**
  * @author
  * @function Search 
  */

  const Search = (props) => {    

  const product = useSelector(state => state.product);

  let { products , filteredProducts } = product;

  const [searchTerm, setSearchTerm] = useState('');

  const onChangeSearch = (e) => {
     setSearchTerm(e.currentTarget.value);
  }

  const isEmpty = searchTerm.match(/^\s*$/); 

  if(!isEmpty) {
    filteredProducts = products.filter( function(prod) {
        return prod.name.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase().trim())
    })    
}
  const history = useHistory();

  const display = !isEmpty    

  const handleSubmit =(e) => {
    e.preventDefault();   
    
    if( !isEmpty ) {       
        history.push(`/search/search_term=${searchTerm}/`, { filteredProducts })
    }

    setSearchTerm('');
}
 return (
        <div>
            <form onSubmit={handleSubmit}>
                <div className="searchInputContainer">
                    <input
                        className="searchInput"
                        placeholder={'What are you looking for...'}
                        value={searchTerm}
                        onChange={onChangeSearch}
                    />
                    <div className="searchIconContainer">
                            <IoIosSearch 
                                style={{
                                    color: 'black',
                                    fontSize: '22px'
                                }}
                                onClick={handleSubmit}
                            />
                    </div>
                </div>
            </form>
            {
                display && <div className="searchResultsCont">
                    {filteredProducts.map((prod, index) => (<div key={index}>{prod.name}</div>))}
                </div>
            }                
        </div>

);
}
export default Search

在新页面上，这是代码：

     import React from 'react';
     import Layout from '../../components/Layout';

     const SearchScreen = ({location}) => {

     const products = location.state.filteredProducts;

     const show = products.length > 0

     return (
        <Layout>
        <div>
            { 
                show ? products.map((prod, index) => (<div key={index}>{prod.name}</div>)) : <div>No items found</div>              
            }
        </div>
       </Layout>
    )
  }

 export default SearchScreen

当我将 URL 复制并粘贴到另一个新页面时，问题就出现了，或者当我 email 其他人 URL 错误变为“未定义”无法读取属性时。 使用这种方法，我知道结果（过滤的产品）尚未通过 function history.push() 推送，这就是它未定义的原因，我怎样才能做到这一点？

Answer 1

我将整个方面更改为从后端过滤产品..它有效