score:3
Accepted answer
The problem here is that setState
is async (it can be sync in certain situations). That's why you are get previous value.
There are two possible solutions.
//
// 1. use value directly.
//
switchCategory = (ev) => {
this.setState({ currentCategory: ev.target.value });
this.loadData(ev.target.value);
}
loadData = async (currentCategory) => {
console.log(currentCategory);
// Get data via XHR...
}
//
// 2. use completition callback on `setState`.
//
switchCategory = (ev) => {
this.setState({ currentCategory: ev.target.value }, () => {
this.loadData(ev.target.value);
});
}
loadData = async () => {
const { currentCategory } = this.state;
console.log(currentCategory);
// Get data via XHR...
}
Article on synchronous setState
in React [link]
Source: stackoverflow.com
Related Query
- Component's state not updating with select and onChange handler
- useSelector and UseEffect with dispatch functions create loop due to not updating state
- State not updating when using select and options
- input onChange not updating state in jest and enzyme
- React navigation with hooks and header function - state is not updating
- onChange event handler function attached with input field to update the state of the app executes once on first load and twice afterwords
- React components not updating with state change
- select tag is keeping initial state value and not updating
- setState not updating state even with callback and handleFunction - ReactJs
- React state is not changing properly with useState and select
- React: multiple components with the same event handler: trying to change the state of only the component which was clicked and not of all the others
- Formik values not updating with state
- Redux Form - initialValues not updating with state
- React hooks useState not updating with onChange
- Why is my react component not updating with state updates?
- Issues with useReducer not synchronously updating the state
- Why is the DOM not updating with state change in ReactJS?
- Why is my React checkbox onChange handler firing on render and then not when the box is clicked?
- useEffect not being called and not updating state when api is fetched
- React-select with Formik not updating select field but does everything else
- Redux not updating components when deep Immutable state properties are updated
- useCallback Hooks getting old state values and not updating
- NextJS initial state is not updating when routing to same page with different params
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- React Child with useEffect() not updating on Parent State Change
- Sync queryParameters with Redux state and react router for function components
- Nested Components not updating their state
- React not updating state with setState with Array of object
- Updating component's state using props with functional components
- FlatList not updating with React Hooks and Realm
More Query from same tag
- Webpack 5 Receiving a Polyfill Error?!?! My JavaScript React project is receiving a polyfill error while trying to compile my webpack.config.js file
- Create HTML file from React components
- How to tag results separately in React
- React form still refreshes even after addying event.prefeventDefault
- Multiple schemas when using Yup and React form hook?
- Prevent materializecss dropdown to close when clicking inside it
- Auth POST request with Axios directed to wrong http address and returning 404
- useEffect not updating state
- React/TypeScript/SPFx forEach and map function issues with complex objects
- Rewrtie some code from jQuery to JS (ReactJS)
- React form not displaying the correct inputs on the screen after I click submit button
- how to include a file inside common files reactjs?
- NPM Unmet peer dependency
- When I click the button more than once, array gets a value. I want it to take all values in the function
- Make filter appear from the left to right side
- Update javascript variable on html after event- Reactjs
- How to namespace es6 classes (for React components)
- How to import "content-based-recommender" package in Reactjs
- Configure React Dev Server within an ASP.NET Core Application
- How to cache expensive custom hook function (sourced by RTK Query results) across components?
- React, async loading for multiple sections/views with different components
- Bootstrap form onSubmit and onClick is not firing the expected function. Button works when outside form component
- React 'npm start' giving me errors, for other projects the command executes successfully
- Multer incorrectly parses formData
- ReactJS - Uncaught Error: Syntax error, unrecognized expression
- Why closing a page does not unmount the component
- Simple component doesnt appear on the browser
- Tying reducers and actions to a non-root component
- Conditional rendering with hooks
- How to use an external css file in a react program