React Native报错求助：undefined is not an object (evaluating 'selectedCategory.title')

这个报错的核心原因很明确：你尝试访问selectedCategory.title时，selectedCategory的值是undefined，也就是说CATEGORIES.find((cat) => cat.id === catId)没有找到任何匹配的分类项。下面是具体的排查和解决步骤：

1. 检查导航参数是否正确传递 #

首先确认跳转到CategoryMealScreen的页面，是否正确传递了categoryId参数。比如在跳转的地方应该是类似这样的代码：

// 示例：从分类列表页跳转时的代码
props.navigation.navigate('CategoryMeal', {
  categoryId: item.id // 这里必须是CATEGORIES中存在的有效id
});

如果参数没传、传错了，或者参数名不是categoryId（比如写成了catId），都会导致props.navigation.getParam("categoryId")拿到错误的值，进而find不到匹配项。

2. 验证CATEGORIES数据的正确性 #

打开../data/dummy-data.js，检查CATEGORIES数组的结构：

• 每个分类对象必须包含id和title字段
• 确保id的类型和你传递的categoryId类型一致（比如都是字符串"1"或者都是数字1，===是严格相等，类型不匹配会导致匹配失败）

举个正确的CATEGORIES示例：

export const CATEGORIES = [
  {
    id: "1",
    title: "Italian",
    // 其他字段...
  },
  {
    id: "2",
    title: "American",
    // 其他字段...
  }
];

3. 添加防御性代码避免崩溃 #

即使前面的问题都解决了，也可能存在极端情况（比如参数被篡改）导致找不到分类，所以建议添加空值保护：

方法1：使用可选链操作符（推荐） #

React Native支持可选链?.，可以直接修改代码：

// 在组件渲染中
<Text>{selectedCategory?.title}</Text>

// 在navigationOptions中
headerTitle: selectedCategory?.title || "Default Title",

方法2：条件渲染 #

如果你的环境不支持可选链（比较旧的React Native版本），可以用条件判断：

// 组件内部
return (
  <View style={styles.screen}>
    <Text>The Category Meal Screen!</Text>
    {selectedCategory ? <Text>{selectedCategory.title}</Text> : <Text>Category not found</Text>}
    {/* 其他组件... */}
  </View>
);

// navigationOptions中
return {
  headerTitle: selectedCategory ? selectedCategory.title : "Default Title",
  // 其他配置...
};

4. 调试确认变量值 #

可以在代码中添加console.log来排查：

const CategoryMealScreen = (props) => {
  const catId = props.navigation.getParam("categoryId");
  console.log("Received categoryId:", catId); // 看拿到的参数是什么
  const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);
  console.log("Found category:", selectedCategory); // 看是否找到分类
  // ...
};

运行后查看控制台日志，就能清楚看到是参数不对还是数据不匹配。

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