React Native列表选择后传参至前屏获空值问题求助

问题根源分析 #

• setState异步特性导致传旧值：调用setText后立刻执行navigation.navigate，但React的useState更新是异步的，此时selectedText还未完成更新，传递的仍是初始空字符串。
• 数据遍历逻辑问题：使用filter遍历数据但未正确终止遍历，且原函数代码不完整（缺少闭合结构），可能导致选中逻辑未执行。
• 参数监听依赖缺失：前一屏幕的useEffect依赖为空数组，仅在组件挂载时执行一次，无法捕获后续路由参数的更新。

修复代码示例 #

1. 修正选择与导航逻辑

改用find精准匹配选中项，并在setState的回调中执行导航（确保状态更新完成后再传参）：

const textSelection = (id) => {
  // 用find快速定位匹配ID的项，替代低效的filter
  const selectedItem = data.find(item => item.id === id);
  
  if (selectedItem) {
    setText(initialState => ({
      ...initialState,
      selectedText: selectedItem.OrderNo
    }), () => {
      // 状态更新完成后再导航，确保传递最新选中值
      navigation.navigate({
        name: "INVENTORY_FORM",
        params: { selectedValue: text.selectedText },
        merge: true
      });
    });
  }
};

2. 修正前一屏幕的参数监听

更新useEffect的依赖数组，监听route.params变化，确保参数更新时能触发日志打印：

useEffect(() => {
  console.log(route.params?.selectedValue);
}, [route.params]); // 监听路由参数变化，捕获后续更新

3. 简化渲染逻辑（可选）

使用空值合并运算符??简化文本渲染的判断逻辑：

<Text style={{ color: COLORS.black, ...FONTS.body4 }}>
  {route.params?.selectedValue ?? "None Selected"}
</Text>

额外注意事项 #

• 确认data数组中的id和OrderNo字段拼写正确，避免因字段名错误导致选中值为空。
• 若使用React Navigation v6+，确认merge: true的使用场景是否合理（仅需合并现有参数时才需设置，否则可省略）。

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