当我返回 React 页面时保存之前的搜索

Question

我的应用 returns 在执行搜索时通过 API 结果。每个结果都有一个详细信息 link。单击 link 并返回我搜索的内容未保存，搜索栏为空。您必须将之前的搜索重写为 select 另一个结果。我希望在返回时保存一般搜索。

function GoogleBooksSearch() {
    const [book, setBook] = useState("");
    const [result, setResult] = useState([]);
    const apiKey = ("MY API")

    function handleChange(event) {
        const book = event.target.value;
        console.log(event.target.value);
        setBook(book);
    }
    function handleSubmit(event) {
        event.preventDefault();
        axios.get("https://www.googleapis.com/books/v1/volumes?q=" + book + "&key=" + apiKey + "&maxResults=20")
            .then(data => {
                console.log(data.data.items);
                setResult(data.data.items);
            })
    }

    return (
        <div>
            <div className="hero-container">
                <h1>Search your book</h1>
                <p>Discover the best books ever</p>
                <form onSubmit={handleSubmit}>
                    <div className='container'>
                        <div>
                            <input onChange={handleChange} className="form" autoFocus placeholder="Enter the title of the book" type="text" />
                            <div style={{ marginTop: '20px' }}></div>
                            <div className='d-grid gap-2 '>
                                <input type="submit" value="SEARCH" className="btn btn-primary btn-lg mx-auto" />
                            </div>


                        </div>
                    </div>
                </form>
            </div>

我正在使用 .map 函数过滤结果，并使用 react-router link 打开“详细信息”页面。

{result.map(book => ( ------

                                <Link className="btn btn-primary mt-auto"
                                    to={
                                        pathname: '/details',
                                 }>
                                    View
                                </Link>

Answer 1

我建议实现一个缓存库并使用它的重新隐藏过程，它会更高效并且具有更高的兼容性，但为了快速的 hackish 方式 实现这一点的方法是将您的搜索查询及其结果保留在 localStorage（即使在浏览器关闭后仍会保留）或 sessionStorage（可以是特定于会话的），同时呈现搜索组件从 Session/Local 存储空间。

Further also you can use Memorization by using React Memo hooks to integrate the momo component with cache to improve stability and performance

这样的事情可以帮助你（关注评论）

//PERSITST THE SEARCH HERE
  const {searchQuery,searchResults} = JSON.parse(window.sessionStorage.getItem("searchDetails"));
  
   const [book, setBook] = useState(searchQuery ? searchQuery : "" );
    const [result, setResult] = useState( searchResults ? searchResults:[]);
    const apiKey = ("MY API")
    
    function handleChange(event) {
        const book = event.target.value;
        console.log(event.target.value);
        setBook(book);
    }
    function handleSubmit(event) {
        event.preventDefault();
        axios.get("https://www.googleapis.com/books/v1/volumes?q=" + book + "&key=" + apiKey + "&maxResults=20")
            .then(data => {
                console.log(data.data.items);
                setResult(data.data.items);

// STORE THE DATA HERE 
               window.sessionStorage.setItem("searchDetails",JSON.stringify({searchQuery:book,searchDetails:data.data.items}))
            })
    }

    return (
        <div>
            <div className="hero-container">
                <h1>Search your book</h1>
                <p>Discover the best books ever</p>
                <form onSubmit={handleSubmit}>
                    <div className='container'>
                        <div>
                            <input onChange={handleChange} className="form" autoFocus placeholder="Enter the title of the book" type="text" />
                            <div style={{ marginTop: '20px' }}></div>
                            <div className='d-grid gap-2 '>
                                <input type="submit" value="SEARCH" className="btn btn-primary btn-lg mx-auto" />
                            </div>


                        </div>
                    </div>
                </form>
            </div>

当我返回 React 页面时保存之前的搜索

Save the previous search when I go back with the page React

search

reactjs

react-router

react-hooks