React Page content disappears after reload-CodePudding

Please is anyone available to answer? Mapped content on this simple react app keeps disappearing after reload.

It displays at first after mapping and if for any reason, there is a page refresh, it's gone.

I have checked the console and I saw that the store becomes empty when this happens. But the backend saves every 'item' coming from the input despite the disappearance from the frontend.

I have to enter a new value on the input to get a new display. But reload clears it out again. Is there anything I can do stop this behavior?

I have tried localStorage, sessionStorage, nothing seems to work.

Here's the form code


const [itemState, setItemState]=useState({
  item1:''
});
 const dispatch = useDispatch()
  useEffect(()=>{
      dispatch(getItem1())    
        },[getItem1])

         const itemSubmit =(e)=>{
            e.preventDefault() 
            
              dispatch(setItem1(itemState))
             
               
          }
  return (
    <div >
    <p> Item1:</p>    
  
      <StoredItems/>
   
<input
 autoComplete='off'
 className='tankInput '  
value={itemState.item1} 
onChange={(e)=> setItemState({...itemState,item1: e.target.value})}
onDoubleClick={itemSubmit}
></input>
 
</div>
  )

Here's how i'am displaying it

 const store_Item  = useSelector((state)=> state.store_Item)
 
  return (
    <div>
      

{ store_Item.map((oneItem)=>(
<div key={oneItem._id}>
         <StoreItem oneItem={oneItem}/>        
</div>
      )) }  
      
     
    </div>
  )

Updated with fetching logic

const API =axios.create( {baseURL: 'http://localhost:3100/'})
 
export const fetchItem1 = ()=>API.get( '/item1')
export const postItem1 = (newItem)=> API.post('/item1', newItem)
export const patchItem1 = (id, patchedItem)=> API.patch(`/item1/${id}`, patchedItem)
export const deleteItem1= (id )=> API.delete(`/item1/${id}` )

If there is any other part of the code that is necessary for a solution ,I can share on request. I just think the problem might be in these files.

Thank you.

CodePudding user response：

If you're wanting to persist data across refreshes you have 2 options. Either store the data in localStorage in your browser, or use a database.

With either route you would then need to popuplate your local store on page load, and then have some mechanism that would save to the database / local storage at a time you feel appropriate

CodePudding user response：

Thank you all for your response. I found the issue after two days. Had a hidden typo in my one of my consts files. Has taken me two days, but all good now.