React Navigation 仅在第二次导航后设置参数答案

【问题标题】：React Navigation only sets param after navigating a second timeReact Navigation 仅在第二次导航后设置参数
【发布时间】：2021-08-18 11:08:50
【问题描述】：

我想从 Flastlist 传递项目（资产）并显示在子屏幕中。但是当我按下项目时，参数为空。我必须返回并再次按下它才能设置参数。如果我按下另一个项目，旧项目仍然存在，直到我第二次按下新项目。我不知道 useEffect 是否是最好的方法。我只是在尝试不同的方法，但没有使用 useEffect、useFocusEffect 或没有任何运气。

Flastlist 的父级

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

【问题讨论】：

标签： javascript react-native react-hooks react-navigation

【解决方案1】：

当您将selectedItem 值作为参数传递到下一个屏幕时，从setSelectedItem 设置的新状态尚未应用于组件。由于尚未应用新状态，因此您仍在传递为 selectedItem 设置的初始 null 值。发生这种情况是因为函数根据当前的闭包使用状态值。

有关此问题的更详细说明，请参阅this StackOverflow post。

【讨论】：

非常感谢。我通过将导航操作移动到 useEffect 钩子并让它检查直到 selectedItem 完成来解决它。

【解决方案2】：

问题解决了。

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

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

【讨论】：