React Navigation只在第二次导航后才设置param

Question

我想从Flastlist传递项目(资产)并在子屏幕中呈现。但是当我按下项目时，参数是空的。我必须返回并再次按它来设置参数。如果我按下不同的项，旧的项仍然停留，直到我第二次按下新项。我不知道useEffect是不是最好的方法。我只是尝试不同的方法，但没有任何运气使用useEffect, useFocusEffect，或没有。

父元素

export default function SitesScreen(props) {
const [sites, setSites] = useState(["Power Plant", "Paper Mill", "Plastic Injection"])
const [selectedItem, setSelectedItem] = useState(null)

const Item = ({ item, onPress }) => (
<TouchableOpacity onPress={onPress} style={[styles.item]} >
<Text style={styles.text}>{item}</Text>
</TouchableOpacity>
)
const renderItem = ({ item }) => {
return (
<View style={styles.itemContainer} >
<Item
item={item}
onPress={() => onItemSelected(item)}
/>
</View >
)
}
const onItemSelected = (item) => {
setSelectedItem(item)
props.navigation.navigate("Asset", { asset: selectedItem })
}
return (
<View style={styles.container}>
<CustomHeader title="Sites" navigation={props.navigation} isHome={true} ></CustomHeader>
<View style={styles.contentContainer}>
<View style={{ width: '90%', height: '50%', alignItems: 'center', bottom: -150 }} >
<FlatList
data={sites}
renderItem={renderItem}
keyExtractor={(item) => JSON.stringify(item)}
/>
</View>
</View>
</View>
)}

子屏幕显示项目

export default function SitesScreen(props) {
const [asset, setAsset] = useState('')

useEffect(() => {

setAsset(props.route.params.asset)
console.log(asset)
}, [])

return (
<View style={styles.container}>
<CustomHeader title="Asset" navigation={props.navigation} isHome={false} ></CustomHeader>
<View style={styles.contentContainer}>
<Text style={styles.text} >{asset}</Text>
<View style={{ width: '90%', height: '50%', alignItems: 'center', bottom: -150 }} >
</View>
</View>
</View>
)}

Answer 1

当您将selectedItem值作为参数传递到下一个屏幕时，来自setSelectedItem的新状态设置尚未应用于组件。因为没有应用新的状态，所以您仍然传递为selectedItem设置的初始null值。这是因为函数根据当前闭包使用状态值.

关于这个问题的更详细的解释，请参阅StackOverflow帖子。

Answer 2

问题解决

父屏幕需要在useEffect钩子中有导航操作，而不是在onItemSelected函数中。这样，它就会等到状态改变后再进行导航。

useEffect(() => {
if (selectedItem) {
props.navigation.navigate("Asset", { asset: selectedItem })
}
}, [selectedItem])