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

Question

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

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 链接打开“详细信息”页面。

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

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

Answer 1

我建议实现一个缓存库并使用它的重新隐藏过程，这样会更高效并且具有更高的兼容性，但是为了一种快速的 hackish 方式 实现方式这是为了将您的搜索查询及其结果保留在 localStorage(即使在浏览器关闭后仍会保留)或 sessionStorage(可以是特定于 session 的)，并在呈现搜索组件时从 session /本地存储中重新调整状态。

Further also you can use Memorization by using React Memo hooks to integratethe 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>