State is not ready when i need it to send it via react navigation

Question

Ok so the problem is in title, i update a state value to use it right after into a React Navigation object who will be send as params to next page.

here my state declaration :

const [dataForDetailsPage, setDataForDetailsPage] = useState('')

here my onPress :

{results.map((item, i) =>
              <ListItem thumbnail key={i} style={{ marginBottom: 5, marginTop: 5 }}>
                    <Left>
                        {itemPicture !== undefined ?
                            <Thumbnail square large source={{ uri: results[i].media.logo.big }} />
                         : <Thumbnail square large source={{ uri: results[i].media.logo.small }} />
                                              }
                   </Left>
                     <Body>
                        <Text style={{ fontWeight: 'bold', fontSize: 16 }}>{item.name}</Text>
                        <Text note numberOfLines={1}>{item.address}</Text>
                        <Text note numberOfLines={1}>{item.postalcode} {item.city}</Text>
                     </Body>
                     <Right >
                        <Text style={s.voirPlusBtnTxt} onPress={() => { goToDetailPage(item.name) }}>Voir +</Text>
                     </Right>
                    </ListItem>
                                    )}

and here my function called onPress event :(had to found a trick but only works on double click cause first time i click i don't enter in second condition somehow even if i change my state value before)

function goToDetailPage(itemName) {
    
    setDataForDetailsPage(itemName)
    console.log('itemName : '+itemName) //itemName return the value i want
    if(dataForDetailsPage === ''){
        setDataForDetailsPage(itemName)
    }

    if(dataForDetailsPage != ''){
        console.log('DataForDetailsPage : '+ dataForDetailsPage) 
        navigation.navigate('Details', {
            nameFromResultsPage: dataForDetailsPage
        })
    }  
}

i tryed to put the function as async function and do a await before setDataForDetailPage but same problem.

tried to use setState callback? `setDataForDetailsPage(itemName, yourCallbackFunction)` — Calvin Nunes, Nov 13 '20 at 16:34
@CalvinNunes The `useState` setter does not accept a callback like the class-based `setState`. — Brian Thompson, Nov 13 '20 at 16:44
Why not just navigate with the `itemName` value instead of trying to store it in state and waiting a render cycle to navigate? — Drew Reese, Nov 13 '20 at 17:25

score 2 · Accepted Answer · answered Nov 13 '20 at 16:35

The reason this is happening because the setter function of useState (setDataForDetailsPage) is async which meant that the rest of the code doesn't wait to run until it finishes.

You need to setup a useEffect to run every time dataForDetailsPage is updated.

Like this

useEffect(() => {

    if(dataForDetailsPage != ''){
        console.log('DataForDetailsPage : '+ dataForDetailsPage) 
        navigation.navigate('Details', {
            nameFromResultsPage: dataForDetailsPage
        })
    } 
},[dataForDetailsPage])

Thx this works just fine :) – Arnaud Rey Nov 13 '20 at 19:46 — Arnaud Rey, Nov 13 '20 at 19:46

State is not ready when i need it to send it via react navigation

1 Answers1