React Navigation传参时dataForCategoryPage未定义问题求助

1. 先修复navigation.navigate的参数传递错误 #

navigation.navigate的第二个参数必须是单个对象，你现在传了多个独立对象，导致只有第一个{item}会被当作有效参数，dataForCategoryPage和isLoadingCategory都被忽略了，这是参数接收为undefined的直接原因。

错误写法：

navigation.navigate('CategoryRes',{item},{dataForCategoryPage},{isLoadingCategory})

正确的参数传递方式：

// 把所有要传递的参数合并到一个对象里
navigation.navigate('CategoryRes', {
  item,
  dataForCategoryPage,
  isLoadingCategory
})

2. 解决React状态异步更新的问题 #

setDataForCategoryPage是异步执行的，调用后不会立刻更新状态值，所以你在调用navigate时，传递的dataForCategoryPage还是旧的初始值（大概率是undefined）。

最简洁的优化：直接传递目标数据，不用中转state #

既然你是根据item.category确定要传的数据，完全可以直接把对应的数据变量（catBurger/catPizza等）直接传给目标页面，跳过state中转，既避免异步问题，又简化代码：

修改后的categoryHandler函数：

const categoryHandler = (item) => {
  let targetData;
  if(item.category === 'Burger'){
    targetData = catBurger;
  } else if(item.category === 'Pizza'){
    targetData = catPizza;
  } else if(item.category === 'Sushi'){
    targetData = catSushi;
  } else {
    targetData = catMiddleEast;
  }

  // 直接传递targetData，不用经过state
  navigation.navigate('CategoryRes', {
    item,
    dataForCategoryPage: targetData,
    isLoadingCategory
  })
}

如果确实需要保留dataForCategoryPage这个state（比如其他组件或逻辑要用到），可以用useEffect监听状态变化，等状态更新完成后再跳转：

import { useEffect, useState } from 'react';

// 新增状态标记跳转需求
const [needNavigate, setNeedNavigate] = useState(false);
const [currentItem, setCurrentItem] = useState(null);
const [currentLoadingState, setCurrentLoadingState] = useState(false);

const categoryHandler = (item) => {
  let targetData;
  if(item.category === 'Burger'){
    targetData = catBurger;
  } else if(item.category === 'Pizza'){
    targetData = catPizza;
  } else if(item.category === 'Sushi'){
    targetData = catSushi;
  } else {
    targetData = catMiddleEast;
  }

  // 更新状态，标记需要跳转
  setDataForCategoryPage(targetData);
  setCurrentItem(item);
  setCurrentLoadingState(isLoadingCategory);
  setNeedNavigate(true);
}

// 监听跳转标记，状态更新后执行跳转
useEffect(() => {
  if(needNavigate){
    navigation.navigate('CategoryRes', {
      item: currentItem,
      dataForCategoryPage: dataForCategoryPage,
      isLoadingCategory: currentLoadingState
    });
    setNeedNavigate(false); // 重置标记，避免重复跳转
  }
}, [needNavigate, dataForCategoryPage, currentItem, currentLoadingState, navigation]);

3. 目标页面接收逻辑无需修改 #

const CategoryRes = ({navigation, route}) => {
  const [data, setData] = useState([]);
  const {item, isLoadingCategory, dataForCategoryPage} = route.params;
  
  // 可选：把传递过来的数据赋值给本地state
  useEffect(() => {
    setData(dataForCategoryPage);
  }, [dataForCategoryPage]);
}

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