Open asimdis0286 opened 6 years ago
Let me try to show what the problem is. I think it is some issue with React-Router. Assume that the rest of the code is exactly like yours. My code(only relevant portions):
//App.js. ( I am passing a call back function(AddTempItem) to a child component which is one of the Applied Routes in Routes.js. This function comes back and concats more items to the selectedItems in the state.)
constructor(props) {
super(props);
this.state = {
isAuthenticated: false,
isAuthenticating: true,
selectedItems: []
};
}
addTempItem = (newItem, event) => {
const items = this.state.selectedItems.concat([newItem]);
this.setState({ selectedItems: items });
};
render() {
const childProps = {
isAuthenticated: this.state.isAuthenticated,
userHasAuthenticated: this.userHasAuthenticated,
addTempItem: this.addTempItem,
selectedItems: this.state.selectedItems
};
return (
<Routes childProps={childProps} /> ///the child component is one of the Applied routes in this file
)}
//////// In the child component
handleSelectAdd = event => {
this.props.addTempItem({
productId: this.state.product.productId,
quantity: this.state.quantity
});
};
render() {
return (
<Button onClick={this.handleSelectAdd} >Add to Cart</Button>
)}
I see that when I hit the button the new Item goes up to the App state. But, as soon as I hit any link in our navBar I lose my state.
Am I doing something wrong or is this a known issue with withRouter, Route or something else.
@asimdis0286 I think there is a bug currently where clicking on the Navbar does a complete refresh. This clears the state. There is a fix for this here - https://github.com/AnomalyInnovations/serverless-stack-com/issues/35#issuecomment-362173799. We'll be updating the tutorial with this soon.
That said, I think you'd probably need to save the shopping cart info in the browsers local storage. This is because a user might refresh the page and that'll wipe out your state.
@jayair Thanks for the reply. I will try to figure out a way to access the browsers local storage. Also, I will try the solution in issue #35.
hi, this notes app is great but it only serves signed in users....i am trying to build a shopping cart app using it and while I was able to do almost everything smoothly for signed in users, I am strugling with react data management for guest users. for a signed in user i can add items to the cart using his credentials. But, for a guest user who wants to add items to his shopping cart what do I do? i tried having a list of selected items as a key value pair in the overall state of the app but ran into a lot of issues with setstate in react. It seems a lot of people have faced similar issues but no one has a clear solution. Most people suggest using redux to manage the state data but I dont want to switch after already coding up pretty much everything for signed in users. Do you have any ideas? or Can you add to your app an option where a user can create notes and see his notes(similar to guest adding stuff to a cart) even if he is not logged in as long as he maintains his browser session or cookie. Any help will be really appreciated as I am quickly aproaching my deadline....