问用新数据覆盖本地存储

EN

export default function SearchPage(props) {
        // creating state to fetch the api
    const [search, setSearch] = useState('')

    
    // this is my function to monitor the words that are put into the input so these keywords that only matches specific data
    // in the api and so one the data is fetched it renders the topic related to that keyword 
    const handleSearch = (event) => {
        setSearch(event.target.value)
    }


    const handleSubmit = (event) => {       
        event.preventDefault();
            // this is where I bring my useState variable to monitor the state of the key words in order to
            // target specific data from the api    
        let url = `http://hn.algolia.com/api/v1/search_by_date?query=${search}`; 
        axios
        .get(url)
        .then((response) => {
            const result = response.data.hits;
            // this pushes the data fetched from the api to the results page using history
            props.history?.push ({
                pathname: '/results', 
                state: result,
            });
        })
        // catching any errors to let me know if there is something going on in the .then function
        .catch((error) => {
            console.log(error)
            console.log('Error while fetching data!')
        })
    }

    return (
        <div>
            <div className="search-form-container">
                {/* my form in where I search data by keywords */}
                <form onSubmit={handleSubmit}> 
                    <input type='text' placeholder="search" onChange={handleSearch} value={search}/>
                    <button type="submit">Search</button>
                </form>
                <hr/>
                <Link to="/history">Your Search History</Link>
            </div>
        </div>
    )
}

export default function ResultsPage(props) {
    console.log(props)
    // the variable declared below is where I am bringing in the data through history from the api.
    const data = props.history.location.state;

    
        let storedData = localStorage.setItem('data', JSON.stringify(data))
        console.log(storedData)


    // being that I am using history, I can map through the array of objects on the results page as shown below and then render it
    const hitList = data.map((data, idx) => {
        return (
            <ul key={idx}>
                <div>
                  <li> Author: {data.author}</li> 
                  <li>Story Title: {data.story_title}</li> 
                  <li>Comment: {data.comment_text}</li>  
                  <li>Created on: {data.created_at}</li>  
                  <li></li>  
                </div>
                <hr/>
            </ul>
        )
    })

    return (
        <div>
            <Link to='/'><h1>Search</h1></Link> 
            <Link to='/history'><h1>Your History</h1></Link>
            {/* In order for me to show my data I first had to map through the array of objects and then put the variable "hitlist" in the return */}
            <h3>{hitList}</h3>
        </div>
    )
}

export default function SearchHistoryPage(item) {
        
        const storedData = JSON.parse(localStorage.getItem('data'));
        storedData.push(item);
        localStorage.setItem('data', JSON.stringify(storedData));
        console.log(storedData);                                    

        const searchHistory = storedData.map((data, idx) => {
            return (
                <ul key={idx}>
                  <li> Author: {data.author}</li> 
                  <li>Story Title: {data.story_title}</li> 
                  <li>Comment: {data.comment_text}</li>  
                  <li>Created on: {data.created_at}</li>  
                </ul>
            )
        })

    return (
        <div>
            <h2>{searchHistory}</h2>
        </div>
    )
}