useState() is not overwriting data properly

Question

I am running a Flask backend and a React frontend. Depending on some options on the frontend, data is fetched from the backend and returned to the frontend. One thing that happens is that when the page is loading there is a default state, which returns some data from the beginning.

One of the things that is returned are 5 arrays with length 24. I can see from the backend what they look like, and there are no problems. Then if I switch the default state (resulting in different data returned) the backend should instead return 5 arrays with length 48 instead of 24, i.e. same type of object but with different lengths.

However, this is there it stops working. When I go from 48 to 24 in length, there are no issues, but when I go from 24 to 48 it stops, and I receive a Uncaught TypeError: Cannot read properties of undefined (reading '1') error. I can see in the backend that it returns 5 arrays of length 48, but on the frontend, if I do a console log of the length of the arrays, the first array is length 48, but the next 4 is only 24. So it seems like there are some issues with updating the state of the data in the frontend.

I fetch my data by:

function fetchData(e) {
        e?.preventDefault();
        POST('/api', { data1: data1, data2: data2, data3: data3, data4: data4, data5: data5 }).then(
            async (response) => {
                const json = await response.json()
                setData1(json.data1)
                setData2(json.data2)
                setData3(json.data3)
                setData4(json.data4)
                setData5(json.data5)
            }
        )
    }

Where the useStates are defined as:

const [data1, setData1] = useState([]);
const [data2, setData2] = useState([]);
const [data3, setData3] = useState([]);
const [data4, setData4] = useState([]);
const [data5, setData5] = useState([]);

So can anyone maybe spot what I might be doing wrong ?

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Yaman KATBY, Jan 25 '22 at 13:34

Edwin Garcés Saucedo · Accepted Answer · 2022-01-25T13:32:40.277

1

Maybe if you use await in each setstate you will have a better result, is not the best practice, but should do the work:

function fetchData(e) {
        e?.preventDefault();
        POST('/api', { data1: data1, data2: data2, data3: data3, data4: data4, data5: data5 }).then(
            async (response) => {
                const json = await response.json()
                await setData1(json.data1)
                await setData2(json.data2)
                await setData3(json.data3)
                await setData4(json.data4)
                await setData5(json.data5)
            }
        )
    }

Edit 1

Based on comments, you should change the data structure as follows:

function fetchData(e) {
        e?.preventDefault();
        POST('/api', data).then(
            async (response) => {
                const json = await response.json()
                setData(json)
            }
        )
    }

You still have all data and you will access to it with data.data1. As you can see to make the call to the API you just need the data object and you don't need to destructure it.

edited Jan 25 '22 at 13:32

answered Jan 25 '22 at 11:46

Edwin Garcés Saucedo

86
3

Yeah, I think this is kind of unstable. The idea is that I pass this data on to other components. And it seems that this passing of data is faster than the update, so some of the data are missing until I update again for instance. So I'm not sure this approach is that good. – Denver Dang Jan 25 '22 at 11:50
Maybe you need to change your data structure, if you have a big structure with all data (data1, data2, data3...) and have just one setData(json) you should not have data missing. – Edwin Garcés Saucedo Jan 25 '22 at 13:25
Hmmm, I was actually looking for a way to improve this (because I have more than five). But if you can access them all by your newest example, that is just great. – Denver Dang Jan 25 '22 at 13:30
I hope the last edit was so useful, I consider that is an improve and give you a cleaner code – Edwin Garcés Saucedo Jan 25 '22 at 13:35
Does it matter what type the data is ? For example, I have lists, I have strings, I have int values, etc. Can everything be inserted into the same setState, or should same types be in their own, and not mixed with others ? – Denver Dang Jan 25 '22 at 13:36
I don't know what exactly you have in your data structure, but you don't need to put every string with the others, you can make an object with different types. Example: const someObject = { name: 'Denver', lastName: 'Dang', age: 25, salary: 123.45, nicknames: [ 'Ddang', 'DCoder', 'Programmer'] } – Edwin Garcés Saucedo Jan 25 '22 at 13:45
Arh, excellent. I have to try that out. – Denver Dang Jan 25 '22 at 13:50

score 0 · Answer 2 · answered Jan 25 '22 at 11:22

The first i can think of is that:

setCount(count + 1);
setCount((prevCount) => prevCount + 1)

In the first line we are updating the state, but we are not sure when its going to be updated, on the other hand on the second line we use the callback that the setter provides, and thats how we are sure thah we are going to get the updated value.

So, useState() is asynchronous, there is no confirmation of that the data is going to be updated by the order you put it in your code. And that is the issue here.

For in depth explanation, take a look at the refs:
https://reactjs.org/docs/hooks-state.html
Why is setState in reactjs Async instead of Sync?

useState() is not overwriting data properly

2 Answers2

Edit 1