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.
Related
I'm using code like this it is not working for me
componentWillRecieveProps(nextProps,nextState){
if(nextProps.navigation.state != this.state){
//here calling api
}
}
I think the question should be more elaborative to help to solve your issue. Based on your questions, you may be asking for either -
How to reload page if data changes
How to reload page if navigation state changes
How to reload page if data changes
In this case, you no need to add 'componentWillRecieveProps'. You can simply check for a value in render method like this
{data.items.length && <ItemLIstCustomComponent />}
or
{data.items.length ? <ItemLIstCustomComponent /> : <EmptyMessageComponent />}
You can look into conditional rendering in react-native.
If the re-render is not happening still? Then your way of updating state/data is not correct. Make sure you make copy of object and update the existing one.
To understand this, read about mutable objects and react shallow-check for re-rendering. Or may be this will help
How to reload page if navigation state changes
I don't think it is good practice to call another API or do any state change related thing in componentWillRecieveProps. You can create a new Screen on which you navigate and call API in componentDidMount.
You can try React navigation if you are not using any navigation library.
I'm trying to integrate third-party component Adaptive card in my application using VueJs but getting following error when wrapping it inside a separate component so that I can re-use it in other places.
Error in mounted hook: "TypeError: this._card.onExecuteAction is not a
function"
I've created a Demo to show the work done so far, can anyone suggest what I'm missing here.
I just need to integrate this adaptive card in my project as a reusable component
In fact, you are trying to call onExecuteAction function, instead of assigning it. It can be fixed, like this: this._card.onExecuteAction = action => this.$emit("action", action);
ps. i suggest you need also use :card="card" in your component template definition in TodoLis.vue and then add something like #action="handleAction" to it, to handle events emitted by your component.
I'm working on adding swipe to remove functionality to an app we are developing. For reasons we are not using an external library to handle this, so I am writing it myself.
In my project I have a container where I keep state. I use setState to update the state, and am passing state down to this child component as a prop. In the component below, componentWillReceiveProps is called with the correct value updates when they happen, but the child component of this is not receiving updates to its props. If this doesn't make enough sense or you need to see more code let me know. I've only included the parts of code that I feel are relevant since this is a private project.
constructor(props) {
super(props);
this.renderWishlistRow = this.renderWishlistRow.bind(this);
}
renderWishlistRow(product) {
return (
<WishlistRow
item={product}
onItemPress={this.props.onItemPress}
onRemoveAction={this.props.onRemoveAction}
shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
onScrollAction={this.props.onScrollAction}
itemPressed={this.props.itemPressed}
onEndScroll={this.props.onEndScroll}
/>
);
}
Then, inside the render function:
return (
<KeyboardAwareListView
dataSource={this.props.dataSource}
renderRow={this.renderWishlistRow}
renderSeparator={renderCardDividerAsSeparator}
onScrollBeginDrag={this.props.onScrollAction}
scrollEventThrottle={16}
onScrollEndDrag={this.props.onEndScroll}
/>
);
Thanks in advance for any help.
EDIT:
I am setting state in the parent component with this code:
this.setState({
shouldCloseRemoveButton: true,
});
I didn't originally include it because componentWillReceiveProps is being called with the correct state changes from the parent component.
EDIT 2:
My App Hierarchy for this part of the app is as follows:
WishlistContainer: contains the setState calls and passes as a prop: shouldCloseRemoveButton={this.state.shouldCloseRemoveButton}
Wishlist: passes props to its child WishlistRow: shouldCloseRemoveButton={this.props.shouldCloseRemoveButton}
WishlistRow: Continues to pass the props down as above, but componentWillReceiveProps is not called here, props are not updating at this level.
I'm not going to mark this as answered, because I want a real answer and what I did to work around this is not good enough for me.
That being said, my workaround was to move the piece of state I was trying to propagate into react-redux. Setting the redux state to contain what I needed using mapDispatchToProps, and then connecting the components that actually needed the state down the line using mapStateToProps, allows the components to receive the notifications they need to do their thing.
Again, I am not choosing this as the answer - even though it is what I did to solve the problem - because something else fishy is going on somewhere and I would like to see if anyone knows why things didn't work as they were.
EDIT
I've run into this issue other times since this originally happened. There is a prop that exists on the Flatlist - This is not the original component I used in the question, but the original component is deprecated now and the Flatlist has the, about to be mentioned, prop for this scenario - called extraData. This particular prop is also watched to help the Flatlist determine if it should rerender itself.
Since the ListView has become deprecated, I feel that using a Flatlist and making sure you pass in an extraData prop - assuming you have a different prop that will change with your list data changes - is an acceptable answer to this problem.
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.
I have a small application in react-native with two components.
on Navigating to a component twice this gives me error for setState function.
Anybody have idea about this .
I am using native base as an starter kit for my project.
the only change I did is I have seperated the UI render part in different js file.
Thanks in advance.
this has something to do with your render function.
the setstate function gives error when there is no such state variable available.
may be on navigating again to that same screen it is giving you a new state for that page instead of the previous state.
Please check your render function.