Reactjs 当我需要通过react导航发送时，状态尚未就绪_Reactjs_React Native_React Navigation

Reactjs 当我需要通过react导航发送时，状态尚未就绪

reactjs react-native

Reactjs 当我需要通过react导航发送时，状态尚未就绪,reactjs,react-native,react-navigation,Reactjs,React Native,React Navigation,好的，问题出在标题中，我更新了一个状态值，以便在进入React导航对象后立即使用它，该对象将作为参数发送到下一页这里是我的国家声明： const [dataForDetailsPage, setDataForDetailsPage] = useState('') {results.map((item, i) => <ListItem thumbnail key={i} style={{ marginBottom: 5, marginTop: 5 }}&

好的，问题出在标题中，我更新了一个状态值，以便在进入React导航对象后立即使用它，该对象将作为参数发送到下一页

这里是我的国家声明：

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

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

这里是我的新闻稿：

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

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

我尝试将该函数设置为异步函数，并在setDataForDetailPage之前进行等待，但存在相同的问题。

之所以发生这种情况，是因为

useState

（setDataForDetailsPage）的setter函数是异步的，这意味着代码的其余部分不会等待运行，直到它完成

您需要设置一个

useffect

，以便在每次更新

dataForDetailsPage

时运行

像这样

useEffect(() => {

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

之所以会发生这种情况，是因为

useState

（setDataForDetailsPage）的setter函数是异步的，这意味着代码的其余部分不会等到它完成后才运行

您需要设置一个

useffect

，以便在每次更新

dataForDetailsPage

时运行

像这样

useEffect(() => {

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

是否尝试使用setState回调

setDataForDetailsPage（itemName，yourCallbackFunction）

@Calvinnues

useState

setter不接受类似基于类的

setState

的回调。为什么不使用

itemName

值导航，而不是尝试将其存储在状态并等待渲染周期导航？@Drew Reese，因为我很笨，哈哈。试过使用setState回调吗

setDataForDetailsPage（itemName，yourCallbackFunction）

@Calvinnues

useState

setter不接受类似基于类的

setState

的回调。为什么不使用

itemName

值导航，而不是尝试将其存储在状态并等待渲染周期导航？@Drew Reese，因为我是哑巴哈哈。Thx这个很好用：）Thx这个很好用：）