REACT: setState in useEffect not working correctly

Question

I am trying to fetch data in the useEffect Hook of a view as the following code shows. If I just output the response.data obj, the output ist correctly shown, but if I output the editObj something complete different is shown.

const [editObj, setEditObj] = React.useState({});

const fetchObject = async () => {
     const response = await API.get('/block-management/kblock/'+id);
     setEditObj(response.data.data);
     console.log(response.data.data); 
     console.log(editObj);
}

useEffect(() => {
     fetchObject();
}, []);

useEffect(() => {
     console.log(editObj);
}, [editObj]);


return (
            <form onSubmit={handleSubmit}>
                <Grid container spacing={2}>
                    <Grid item xl={12}>
                        <BlockInputBasic object={editObj} />
                    </Grid>
                </Grid>
            </form>
);

first Output: { }
second Output: Object { :id: 12123, .... name: "test", ....}

Child:

export default function BlockInputBasic(props) {
    const classes = useStyles();


return (
   <Card className={classes.card} sx={{borderRadius: 5}}>       
       <TextField
            fullWidth
            label="Name"
            name="name"
            required
            variant="outlined"
            defaultValue={props.object.name}
       />
   </Card>
);

I appreaciate your help!

Regards

`setState` is asynchronous and not immediate. React will find the best time to update the state and then update it. — Pranava Mohan, Nov 04 '21 at 07:49
IOW, the fix is not to try to use `editObj` immediately after having called `setEditObj`. — AKX, Nov 04 '21 at 07:51
If you would like to see the `editObj` state changes, you can add a `useEffect` with `editObj` as one of the arrays of dependency. — Bernhard Josephus, Nov 04 '21 at 07:56
@BernhardJosephus after adding it to the dependecy array, it ends up as an infinite loop... What would be a good way to solve this? — n3verm1nd, Nov 04 '21 at 08:04
To go on I need the editObj in a child component as a prop... — n3verm1nd, Nov 04 '21 at 08:09
Hmm... it's weird. The console.log should only be called twice. If you look at the `editObj` log, is the object really changed? — Bernhard Josephus, Nov 04 '21 at 08:34
Sorry I forgot to change the output part, it is shown twice -> firstly as an empty object, secondly with data inside, but If I forward it to the child, it is firstly empty and therefore the defaultValue of the textfields inside the child are empty too... — n3verm1nd, Nov 04 '21 at 08:55
That's expected behavior. Do you want to show the form after the fetch is done? — Bernhard Josephus, Nov 04 '21 at 09:02
Yes, so that the defaultValues of the textfields could be set. — n3verm1nd, Nov 04 '21 at 09:06
Try to change the `useState({})` to `useState(null)` and then do conditional rendering to the parent return function. `return editObj ? (..your child component..) : (..loading component if u have..)`. By doing this, it will show loading when the data is null and show the form when the data is filled. — Bernhard Josephus, Nov 04 '21 at 09:11
Thank you! It looks like that its working!!!! I really appreciate your help @BernhardJosephus — n3verm1nd, Nov 04 '21 at 09:17

REACT: setState in useEffect not working correctly

0 Answers0