score:1
you should move your settodos in useeffect
useeffect(() => {
dbtodos.get().then((snapshot) => {
const initialstate = []; // also this you can move here
snapshot.foreach((doc) => {
const currenttodo = doc.data();
currenttodo['id'] = doc.id;
initialstate.push(currenttodo);
});
settodos(initialstate); /// here
});
}, []);
score:0
when you setstate in useeffect then you have to add setstate in dependency. instead of doing that use another arrow function and call it from useeffect.
use the code below
const app = () => {
// todos are the only state in app
const [ todos, settodos ] = usestate([]);
// fetches todos from firestore database on load
const fetchdata = () => {
const initialstate = [];
dbtodos.get().then((snapshot) => {
snapshot.foreach((doc) => {
const currenttodo = doc.data();
currenttodo['id'] = doc.id;
initialstate.push(currenttodo);
});
});
settodos(initialstate);
}
useeffect(() => {
fetchdata();
}, []);
// add todo
const addtodo = (title) => {
const newtodo = {
title : title,
completed : false
};
dbtodos.add(newtodo).then((doc) => {
newtodo['id'] = doc.id;
settodos([ ...todos, newtodo ]);
});
};
score:0
in useeffect you create empty array. make a request. set empty array to state. when request was fulfilled you make changes in the array by ref. therefore you see you array in dev tool and react does'n rerender you component.
const app = () => {
// todos are the only state in app
const [ todos, settodos ] = usestate([]);
// fetches todos from firestore database on load
useeffect(() => {
dbtodos.get().then((snapshot) => {
settodos(snapshot.map((doc) => ({
id: doc.id,
...doc.data(),
})));
});
}, []);
// add todo
const addtodo = (title) => {
const newtodo = {
title : title,
completed : false
};
dbtodos.add(newtodo).then((doc) => {
newtodo['id'] = doc.id;
settodos([ ...todos, newtodo ]);
});
};
Source: stackoverflow.com
Related Query
- React setState of useState hook successfully updating state, but not re-rendering component
- REACT + REDUX: on redux state change mapStateToProps updating state but view is not rendering as per new state
- React does not change state after updating state in usestate hook (in custom function form)
- React hook useState not updating state as desired?
- State not updating when using React state hook within setInterval
- React setState not updating state
- Updating Parent Component State from Child Component with UseState React Hook
- React Hook useCallback not updating State value
- setState call inside a custom hook is not updating the state
- React not updating state with setState with Array of object
- React useState hook not updating with axios call
- React hook useState not updating with onSubmit
- setInterval updating state in React but not recognizing when time is 0
- Redux - State is updating but React components are not
- React Hook useState Not Updating UI
- useState react hook does not set the array state
- Method not getting correct useState value despite updating state in React
- React setState hook not updating dependent element if passed a variable as opposed to explicit text
- Axios not updating state from API in function called on Click, but works on identical function on Component Mount in React
- Why does setState Hook from React is rendering twice even not changing the state?
- Why is React setState hook not updating immediately?
- React hook useState not updating onclick
- React setState not updating checkbox checked state
- The state variable returned after using useState react hook shows .map is not a function
- React custom hook with event listener not works while updating the state
- React state variable not accurate after set state in useState hook
- Updating state from an array with react useState hook
- React Hooks: updating state using useState does not update the state immediately
- React useState hook isn't updating state as desired
- React state not updating in app but I can console.log correct updated state
More Query from same tag
- React JS to display month based on user input
- firebase deploy of create react app exposes all js code in the source tab?
- Filter React children by type with Typescript
- ReactJs: Unable to POST multiform data through client side
- How should i setup headers at server and client?
- How to migrate to Xcode 12.5
- How do I reset state from a parent component in a child component?
- Generic field of an object returned from a function (hook)
- Rails API how do I send the active record validation error?
- Why does React say not to set 'selected' property on <option> elements?
- Import react component when needed
- How do I redirect user to another page after submit the form?
- Visual Studio Code Editor not Working Properly on Command + S in mac
- Website reload when call parent set state
- Functions is not deployed correctly with an error saying that 'could not find a valid build'
- Why is React.FunctionComponenent preferred over conventional function definitions?
- Can I style different unordered list items separately?
- Redirect to profile after login
- How to stop useEffect from inifite loop when first setting state and then using state
- Setting state inside event listener which is inside componentDidMount method
- If I press too much numbers in my Javascript calculator the numbers go outside the display
- render() is called repeatedly when state is set
- React new project dependency on ^6.14.0 || ^8.10.0 || >=9.10.0
- What is "updating" in React?
- How to sort array in reactjs
- firebase2.default.firestore is not a function - React Firebase
- Lodash find by key and mergeWith while preserving specific key value
- Are custom hooks special functions like Function Components w.r.t. hooks?
- Deck.GL with CARTO and React
- Ant design table not rendering properly when column extracted in a component