React Native报错：undefined is not an object (evaluating 'prod.title') 原因排查

1. FlatList renderItem 参数解构错误 #

FlatList 的 renderItem 回调默认接收的是包含 item 和 index 的对象，你直接用 {prod} 解构，相当于尝试从参数对象里取名为 prod 的属性，但这个属性不存在，导致 prod 为 undefined。

正确写法应该是把 item 重命名为 prod：

renderItem={({ item: prod }) => (
  <ProductCard 
    cardType="social"
    title={prod.title}
    imageUrl={prod.imageUrl}
    price={prod.price}
    unit={prod.unit}
    overallRating={prod.overallRating}
    likes={prod.likes}
    userID={route.params.userEmail} 
  />
)}

或者直接使用默认的 item 参数：

renderItem={({ item }) => (
  <ProductCard 
    cardType="social"
    title={item.title}
    imageUrl={item.imageUrl}
    price={item.price}
    unit={item.unit}
    overallRating={item.overallRating}
    likes={item.likes}
    userID={route.params.userEmail} 
  />
)}

2. products 数组存在空元素 #

即便你定义了 products 变量，数组里可能混入了 undefined、null 或者未正确初始化的元素。比如异步加载数据时，初始的 products 是空数组，或者接口返回的数据有部分元素缺失属性。

可以在渲染前添加空值判断：

renderItem={({ item: prod }) => (
  prod ? (
    <ProductCard 
      cardType="social"
      title={prod.title}
      imageUrl={prod.imageUrl}
      price={prod.price}
      unit={prod.unit}
      overallRating={prod.overallRating}
      likes={prod.likes}
      userID={route.params.userEmail} 
    />
  ) : null
)}

3. products 变量未正确初始化或更新 #

虽然你声明了 products，但可能它的初始值是 undefined，或者组件渲染时数据还未加载完成（比如从API请求数据），导致第一次渲染时 products 是 undefined 或空数组，FlatList 尝试渲染不存在的元素触发报错。

可以给 products 设置初始空数组：

const [products, setProducts] = useState([]);

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