You can promisify this.setState so that you can use the React API as a promise. This is how I got it to work: class LyricsGrid extends Component { setAsyncState = (newState) => new Promise((resolve) => this.setState(newState, resolve)); Later, I call this.setAsyncState using the standard Promise API: this.setAsyncState({ lyricsCorpus, matrix, count }) .then(foo1) .then(foo2) .catch(err => … Read more
setState(updater[, callback]) is an async function: https://facebook.github.io/react/docs/react-component.html#setstate You can execute a function after setState is finishing using the second param callback like: this.setState({ someState: obj }, () => { this.afterSetStateFinished(); }); The same can be done with hooks in React functional component: https://github.com/the-road-to-learn-react/use-state-with-callback#usage Look at useStateWithCallbackLazy: import { useStateWithCallbackLazy } from ‘use-state-with-callback’; const [count, setCount] … Read more
Looks like you’re accidentally calling the handleButtonChange method in your render method, you probably want to do onClick={() => this.handleButtonChange(false)} instead. If you don’t want to create a lambda in the onClick handler, I think you’ll need to have two bound methods, one for each parameter. In the constructor: this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true); this.handleButtonChangeSingle = … Read more
These are two different syntaxes for setState First: handleOnChange(evt) { this.setState(() => ({ tickerName: evt.target.value })); } uses the updater function as the first argument. Second: handleOnChange(evt) { this.setState({ tickerName: evt.target.value }); } uses the object to be updated When using the synthetic event in the updater function you need to use event.persist() From the … Read more
You can use callbacks functions to achieve this. Please refer to the below code. import ‘package:flutter/material.dart’; class RootPage extends StatefulWidget { @override _RootPageState createState() => new _RootPageState(); } class _RootPageState extends State<RootPage> { FeedPage feedPage; Widget currentPage; @override void initState() { super.initState(); feedPage = FeedPage(this.callback); currentPage = feedPage; } void callback(Widget nextPage) { setState(() { … Read more
In my case I was calling the setState method before the build method had completed the process of building the widgets. You can face this error if you are showing a snackBar or an alertDialog before the completion of the build method, as well as in many other cases. So, in such cases you should … Read more
In order to setState for a nested object you can follow the below approach as I think setState doesn’t handle nested updates. var someProperty = {…this.state.someProperty} someProperty.flag = true; this.setState({someProperty}) The idea is to create a dummy object perform operations on it and then replace the component’s state with the updated object Now, the spread … Read more
I work on React. TLDR: But can you trust React to update the state in the same order as setState is called for the same component? Yes. different components? Yes. The order of updates is always respected. Whether you see an intermediate state “between” them or not depends on whether you’re inside in a batch … Read more
You should invoke your second function as a callback to setState, as setState happens asynchronously. Something like: this.setState({pencil:!this.state.pencil}, myFunction) However in your case since you want that function called with a parameter you’re going to have to get a bit more creative, and perhaps create your own function that calls the function in the props: … Read more
Here is a React Hooks specific solution for Error Warning: Can’t perform a React state update on an unmounted component. Solution You can declare let isMounted = true inside useEffect, which will be changed in the cleanup callback, as soon as the component is unmounted. Before state updates, you now check this variable conditionally: useEffect(() … Read more