时间戳

首页 > 解决方案 > 当我需要它通过反应导航发送它时，状态还没有准备好

reactjs - 当我需要它通过反应导航发送它时，状态还没有准备好

问题描述

好的，所以问题出在标题上，我更新了一个状态值，以便在将它作为参数发送到下一页的 React Navigation 对象之后立即使用它。

这是我的状态声明：

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

这是我的 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>
                                    )}

在这里我的函数称为onPress事件:(必须找到一个技巧，但只能在双击时起作用，因为我第一次单击时，即使我之前更改了状态值，我也不会以某种方式进入第二个条件）

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
        })
    }  
}

我试图将函数作为异步函数并在 setDataForDetailPage 之前等待，但同样的问题。

标签： reactjsreact-nativereact-navigation

解决方案

发生这种情况的原因是useState(setDataForDetailsPage) 的 setter 函数是异步的，这意味着其余代码不会等到它完成才运行。

您需要设置一个useEffect以在每次dataForDetailsPage更新时运行。

像这样

useEffect(() => {

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

推荐阅读