useState and initial value as array does not work

user_8500480 0
Viewed 2611

I'm trying to use react hooks in my project and I have a problem with useState when I use array as value.

As you can see in my code below, when I display zoneItems that it should be like items array I get an empty array all the time. Would you have an explanation why?

When I use an object instead of array it works

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
    const items = datas.items.filter(item => item.zoneId === zone.id)
    console.log('========> items', items) // ---- SHOW the good values
    const [zoneItems, updateItems] = useState(items)
    console.log('========> zoneItems  ', zoneItems)   // ---- SHOW all the time []
.........

Thanks in advance

use-state react-hooks reactjs javascript
2 Answers

Ciao, due to async nature of hooks, you assignment useState(items) could be executed after you read the content of zoneItems. But react provides an hook that will be fired every time component will be loaded, or as you prefer, every time zoneItems changes his value: I'm talking about useEffect hook.

So if you want to print the zoneItems content every time is updated, just write something like this:

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

This is the way that react provides to manage async assignment of state.

user_138970650

I think you should initialize the state first as an array first then update it, as follows:

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
    const items = datas.items.filter(item => item.zoneId === zone.id)
    console.log('========> items', items)

    const [zoneItems, updateItems] = useState([])
    
    updateitems(items)

    console.log('========> zoneItems  ', zoneItems)
user_73913420
Related