React Navigation首次跳转传参为null、二次点击才生效问题如何解决

问题根因 #

• 父组件的setSelectedItem是异步更新接口，调用后立即读取selectedItem拿到的还是更新前的旧值：首次点击时读取的是初始值null，第二次点击才能读取到上一次更新后的值，就会出现参数延迟更新、旧值残留的问题。
• 子组件的useEffect依赖项为空数组，仅会在组件首次挂载时执行一次，后续路由参数更新时不会触发重新赋值，也会导致参数残留。
• 子组件中setAsset后立即打印asset拿到旧值，同样是状态异步更新的正常特性。

修复方案 #

父页面修复 #

你完全不需要额外维护selectedItem状态，直接把点击拿到的条目作为路由参数传递即可，修改onItemSelected方法：

const onItemSelected = (item) => {
    // 直接传当前点击的item，绕开异步state的问题
    props.navigation.navigate("Asset", { asset: item })
}

如果确实需要保留selectedItem状态做其他业务逻辑，可以把路由跳转逻辑放到useEffect中，监听selectedItem变化后再执行跳转。

子页面修复 #

优先推荐直接使用路由参数渲染，不需要额外存到本地state，代码更简洁：

// 注意你的子页面函数名和父页面重名了，要改成AssetScreen避免冲突
export default function AssetScreen(props) {
    // 加可选链和默认值避免参数为空时报错
    const asset = props.route.params?.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>
    )
}

如果业务需要把参数存到本地state，记得把路由参数加到useEffect的依赖项中，参数变化时触发更新：

useEffect(() => {
    setAsset(props.route.params.asset)
    // 要打印最新值直接读取路由参数即可，不要读取刚set的本地state
    console.log(props.route.params.asset)
}, [props.route.params.asset])

内容的提问来源于stack exchange，提问作者Jakobk