AdventureBear
commented
6 years ago Communication with @JM-Mendez :
I also looked over the refresh issue, but haven’t run tests to verify this: but I think it has to do with a race condition at this line
question={this.props.resource.questions[this.state.question]} Children components mount before the parent do. So when you refresh the page, it doesn’t have props available to it yet, since the App component hasn’t made the request yet.
I think you can solve this by making sure to set a default return value for every component. For this particular one, you’re requesting to read an array before it’s ready. I’m not sure what else happens after this, but a solution would be something like:
question={ this.props.resource.questions ? this.props.resource.questions[this.state.question] : {} } Take a look in the console at what the Resource component debug returns when it’s working, then refresh the page and you’ll see there’s no response object yet.
Always give React components something to render, or they’ll break. This is also helpful because it forces you to handle errors at the UI, which is where it should be.
You could also look into error boundaries https://reactjs.org/docs/error-boundaries.html
This way you’ll always have a fallback UI if an error surfaces. I haven’t used it, but I think it should recover once props are received.
If this doesn’t work, let me know and we’ll keep troubleshooting it.
http://localhost:3000/categories loads correctly http://localhost:3000/topics loads on refresh http://localhost:3000/categories/neurology loads correctly
http://localhost:3000/topics/nih-stroke-scale does not