The situation. I have an a custom alert component in a shared components file. I have my different screens in their respective files, and they all import the custom alert. On navigation away from one screen to another, and then I navigate back via reactnavigation's back arrow, the alert is not remounted, and so its invocation throws an error. How should I take care of this?
I figured out a hack; so long it works for now and maintains the development momentum. So, prior to any function call that will eventually invoke the custom imported alert, I call setState, and update a dummy value, e.g. this.setState({sth:'sth'}). This seems to in turn, reload the component's relation to its imported stuff, and just like that the error is no more.
Related
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
I am new to react native and I am having a warning that I just don't know how to get rid of it, is it ok if I just hide it as long as it does not become an error to crush my app?
The warning I receive:
Warning: Cannot update during an existing state transition (such as
within render or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects
are an anti-pattern, but can be moved to componentWillMount.
I tried to manage to not happen this warning but if I register a user and than go back to signupscreen and if I try to register another one the warning comes up.
It's best to resolve that warning, you need to look where your updates to the state are happening.
If you do updates to the state or props inside of your render function you are creating infinite render loops.
To help with this problem I need to have your code from render() function. You can Upload it here. Then I can review your code. It will help to solve this problem.
I am using react-native, nested react-navigation, SectionLists, ActionSheet, etc and I am having hard times setting up a decent way of refreshing components / screens. As I have a few different cases, I have also tried different approaches with no luck.
Examples:
- Sending a callback function as a param in the navigator when transitioning from one screen to another for state change.
- Assigning AsyncStorage.getItem straight to a state variable (e.g: used on a ListView) and expect it to refresh.
I've seen many questions in the react-navigation git repo (mainly on how to refresh a screen), and recent suggestion to the project on the best approach for future releases, that got me asking if this is something that is in place already.
I can say though, that I've successfully used redux to check the connection state (NetInfo), that although I couldn't yet port the same idea to a different schenario, I think that it is my best approach.
At the moment I have one schenario, that if solved, I believe will answer a few questions I have. For example:
I have a list of news in my Home screen and a few options in my Drawer navigator that I would like to, when clicked, to sort the Home list, without having to call navigate('screen_name') as I would like to, to still keep the Drawer opened after clicked.
What would be the best approach for this ?
Thanks in advance!
One approach you could follow is:
On click on a DrawerNavigator item, you can dispatch an action which would intern change the state by a value. Eg: filterBy: . This store value can be passed as a prop to your home screen, which would intern contain a logic to filter based on that value.
I havent worked with DrawerNavigator but i feel onPress on each item in drawer navigation can be prevented and a action can be invoked at the same place.
In an angular5 application, I have various sections of my page layout that I would like to control through an angular service. For example, I have a sidenav component that displays when a value is set to open, and I would like to be able to toggle it from any component I'd like.
My initial thought was that it would be nice if I could bind the open value to a variable in a LayoutService I would create, and the LayoutService would contain a toggle() method that would toggle the value and cause the sidenav to open/close. I could then inject my LayoutService into any component I'd like and control various parts of my layout.
Any idea whether this is possible and how I could go about doing this? I thought it might be possible using an EventEmitter or something, but I was wondering whether there was a simpler way and I'd rather not use redux.
https://stackblitz.com/edit/angular-lj7gsz
Here's a side-bar you can open and close using simple rxjs objects.
In the side-bar service, I've created a BehaviorSubject that you can pass boolean values to and I also exposed an Observable, which will emit every time a new value is passed to that subject.
By subscribing to that observable (I've used the async pipe to subscribe for me), my side-bar component will know when other components wish to open or close the side-bar. All the other components need to do is inject the service and call the service's open or close methods.
It's not perfect, but I feel it's definitely better than using event emitters as they were never made to be used in services.
Hopefully this is helpful.
It's easy to get a reference to navigator in the renderScene function, so calling navigator.push(newRoute) is simple when responding to an event that happens from within the JSX tree.
In my case, though, I want to call navigator.push(newRoute) from an external event. My app signs the user in with Google and fires an event when the sign-in is complete, and I want to navigate to a new route in that case.
How can I get a reference to the navigator? Is there any way to get it besides as a parameter to renderScene?
You can get the navigator through refs property: https://facebook.github.io/react/docs/more-about-refs.html. It's part of react (not specific to react native). It's not obvious from the react-native docs that there is a number of 'react' features that can be used in react-native, so i'd really advise to take a close look at react in general.
Note however, there is a good reason Facebook does not mention refs explicitly and loudly. Refs is really not a "go-to" way of accessing component. Your case might be of course different, but it's likely that the Google sign-up is not in-fact "external". It might actually be part of one of the components in the hierarchy tree above the navigator (in which case you can pass the state change down the tree).
Quoting from the summary of the "More about refs" document above:
If you have not programmed several apps with React, your first
inclination is usually going to be to try to use refs to "make things
happen" in your app. If this is the case, take a moment and think more
critically about where state should be owned in the component
hierarchy. Often, it becomes clear that the proper place to "own" that
state is at a higher level in the hierarchy. Placing the state there
often eliminates any desire to use refs to "make things happen" –
instead, the data flow will usually accomplish your goal.
Again - your case might be different and using refs might be perfectly justified, but if you are tempted (for example) to separate out all the Google-related stuff to separate object and if that makes the sign-up "external" - think twice. React really encourages putting all things related to a "component" logic in one place (the component) - even if that includes various technologies and external APIs.