React-Native报错：undefined is not an object (evaluating 'card.image')求助

问题根源分析 #

1. useEffect语法错误：你的代码中useEffect的闭合括号位置错误，导致依赖数组[preferenceSelected]没有被正确关联到effect上，这会导致状态更新逻辑异常，可能引发list状态出现无效值。
2. 缺乏空值校验：当list为空或者card为undefined时，直接访问card.image会触发报错。
3. （可选）数据完整性问题：原始data数组中可能存在缺少image字段的条目。

修复步骤 #

1. 修正useEffect的语法错误

把依赖数组移到useEffect的正确括号内，同时简化筛选逻辑：

const [preferenceSelected, setPreferenceSelected] = useState("");
const [list, setList] = useState(data);

useEffect(() => {
  if (preferenceSelected === '') {
    setList(data);
  } else {
    setList(data.filter(item => item.categoria === preferenceSelected));
  }
}, [preferenceSelected]); // 修正括号位置，确保依赖数组生效

2. 给renderCard添加空值校验

在渲染卡片前先判断card是否存在，避免访问undefined属性：

<View style={styles.EventCards}>  
  <Swiper
    cards={list}
    renderCard={(card) => {
      // 空值校验，防止访问undefined的属性
      if (!card || !card.image) {
        return null; // 也可以返回一个占位卡片组件
      }
      return (
        <TouchableOpacity style={styles.card} onPress={() => {
          navigation.navigate('EventProfile', {
            id: card.id,
            nome: card.nome,
            categoria: card.categoria,
            image: card.image,
            avaliacao: card.avaliacao,
          });
        }} >
          <Image source={{uri: card.image}} style={styles.cardImg} />
        </TouchableOpacity>
      );
    }}
    stackSize={4}
    stackSeparation={10}
    disableBottomSwipe
    disableTopSwipe
    verticalSwipe={false}
    backgroundColor={"transparent"}
    keyExtractor={card => card.id}
  />
</View>

3. 检查原始数据完整性

确保data数组中的每个条目都包含image字段，也可以在初始化状态时预先过滤无效条目：

// 初始化时过滤掉缺少image的无效数据
const [list, setList] = useState(data.filter(item => item?.image));

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