score:0
you need to use 2 useeffect hooks, one for fetch data and second to proceed it:
useeffect(() => {
getnotes();
}, []);
useeffect(() => {
if (notes && notes.length) {
....setstate or what else
}
}, [notes]);
score:0
my note state looks like:
import react, { usereducer } from 'react';
import clientaxios from '../../config/clientaxios';
import notecontext from './notecontext';
import notereducer from './notereducer';
import {
get_notes,
add_note,
delete_note,
update_note,
} from '../../types';
const notestate = ({ children }) => {
const initialstate = {
notes: [],
noteerror: false,
};
const [state, dispatch] = usereducer(notereducer, initialstate);
const getnotes = async () => {
try {
const response = await clientaxios.get('/user/notes');
dispatch({
type: get_notes,
payload: response.data
})
} catch (error) {
console.log(error.response);
}
}
const addnote = async data => {
try {
const response = await clientaxios.post('/addnote', data);
dispatch({
type: add_note,
payload: response.data.data
})
} catch (error) {
console.log(error.response);
}
}
const updatenote = async (id, { title, description }) => {
try {
const response = await clientaxios.put(`updatenote/${id}`, { title, description });
console.log(response.data);
dispatch({
type: update_note,
payload: response.data
})
} catch (error) {
console.log(error.response)
}
}
const deletenote = async id => {
try {
await clientaxios.put(`/deletenote/${id}`);
dispatch({
type: delete_note,
payload: id
})
} catch (error) {
console.log(error.response);
}
}
return(
<notecontext.provider
value={{
notes: state.notes,
noteerror: state.noteerror,
getnotes,
addnote,
updatenote,
deletenote,
}}
>
{children}
</notecontext.provider>
);
}
export default notestate;
and my reducer:
import {
get_notes,
add_note,
delete_note,
update_note,
} from '../../types';
export default (action, state) => {
switch(action.type) {
case get_notes:
return {
...state,
notes: action.payload
}
case add_note:
return {
...state,
notes: [...state.notes, action.payload]
}
case update_note:
return {
...state,
notes: state.notes.map(note => note._id === action.payload._id ? action.payload : note)
}
case delete_note:
return {
...state,
notes: state.notes.filter(note => note._id !== action.payload),
}
default:
return state;
}
}
Source: stackoverflow.com
Related Query
- How can I avoid the infinite loop in useEffect?
- How can stop infinite loop in useeffect hook
- reactjs Avoid Infinite loop using the useState and useEffect
- How do I avoid an infinite loop in useEffect when using Typescript?
- useEffect is causing an infinite loop but i cant find why. Also what can i improve in the code
- How do I avoid infinite loop when using Redux state in useEffect dependency array?
- How to avoid an infinite loop with useEffect in this case? (React)
- How can I avoid this infinite update loop in React.js?
- Is there a way to avoid infinite loop of dependencies and to pass the correct dependencies to useEffect hook in this case?
- How can I make react's useEffect to stop rerender in an infinite loop even with a dependency specified?
- How do I fix an useEffect infinite loop with two properties bound that need to update at the same time?
- How to avoid infinite loop with useEffect
- How can I access state in an useEffect without re-firing the useEffect?
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- How can I escape React useEffect infinite loop?
- How to avoid "React Hook useEffect has a missing dependency" and infinite loops
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- Why is the cleanup of an useEffect hook seeing the result of an RTKQ as isLoading and how to avoid the issue?
- How I can loop through the similar objects in state and push them into object?
- How can I loop through all the elements in my reactjs component?
- How can I do that when the home view navigates to the login view, trigger the useEffect of the login?
- useEffect infinite loop when fetching from the api
- React <div id="root"></div> breaking the design, How can I avoid this?
- How can I avoid infinite loops in my React Router private routes?
- How to avoid the setState() / render() endless loop when passing data from child to parent?
- How to prevent infinite loop in my React code when using setState inside useEffect
- How to fix Too many re-renders. React limits the number of renders to prevent an infinite loop
- How can I make useEffect not return the initial value? I keep getting empty array when I'm trying to pass an array of objects into a component
- How can I render the components after useEffect hook is finished?
- How can I fill a konva rect with fillPatternImage in React or create an infinite grid with the same svg image in React
More Query from same tag
- How to call a function after setting state is complete in useEffect?
- How to read local html file content inside React js App using Webpack loaders?
- Is there a better way to get different data from an API in the same component based on data type?
- Can't access to my data from a SWR fetch - React
- How to replace parts of a string with a react component multiple times?
- target DOM element with React.createPortal
- trigger Axios data fetch on button click in another component
- Best solution binding for ReactJs?
- I am making navbar that hides navbar on scrolling over 100px but doesn't work
- Graphql Hasura Update if the field is not null
- RangeError: Maximum call stack size exceeded Reactjs?
- cant make selenium find element
- Expo React Native: expected version range: ~6.0.0 - actual version installed: ^5.0.1
- Update View After Sort Method Runs on Button Click
- React Bootstrap Accordeon iterating through map
- React-redux: How to write an integration test
- Why mapStateToProps return empty object when state has been mutated?
- ReactJS - Adding value on specific table row
- How to update styled-components' variables depending on the media queries?
- react dc.js import not working
- How to wait for axios function to return value when in service class
- Why does Typescript flag a possible undefined value on array length check with greater than but not equals?
- Use React Hook in StackOverFlow code snippet
- Toggle background color of list on click react.js
- Reactjs set selected date value at Datepicker
- React Bootstrap table doesn't show properly
- Getting warning from props passed in MUI styled components related to React not recognizing it
- Uncaught TypeError: Cannot read property 'setLocalizer' of undefined
- Why framer-motion does not animate array of items, like single items?
- Multiple state version merge for React