如何禁用对象数组中动物项的点击功能？

问题核心在于：你当前的disabled判断依赖item.subcategories和item.animals属性，但动物项（id6、7）根本没有这两个属性，导致item?.subcategories?.length === 0和item?.animals?.length === 0的判断结果为undefined === 0，不成立，所以无法禁用点击。

以下是两种可行的解决方式：

方式一：给动物项添加类型标识 #

在获取数据时，给动物列表的每一项添加明确标识，后续直接通过该标识判断是否禁用：

修改useEffect中的数据处理逻辑：

useEffect(() => {
    fetchSubCategoryData(route.params.subcategories).then((data) => {
        if (data.animals.length > 0) {
            // 为每个动物项添加isAnimal标记
            const markedAnimals = data.animals.map(animal => ({ ...animal, isAnimal: true }));
            setSubCategoryList(markedAnimals);
            setLoading(false);
        } else {
            setSubCategoryList(data.subcategories);
            setLoading(false);
        }
    });
}, [route]);

然后更新TouchableOpacity的disabled条件：

<TouchableOpacity
    onPress={() => navigation.navigate("groepen", { subcategories: item.id })}
    disabled={
        isLoading || item.isAnimal || (item?.subcategories?.length === 0 && item?.animals?.length === 0)
    }>
    <Spacer position="bottom" size="large">
        <SubCategoryInfoCard subcategories={item} />
    </Spacer>
</TouchableOpacity>

这种方式逻辑清晰，即使后续API结构调整，只要维护好isAnimal标记就能保证判断有效。

方式二：直接判断项的属性特征 #

不需要修改原始数据，直接通过动物项没有subcategories和animals属性的特征来判断：

更新disabled条件：

<TouchableOpacity
    onPress={() => navigation.navigate("groepen", { subcategories: item.id })}
    disabled={
        isLoading || 
        (!item.subcategories && !item.animals) || 
        (item?.subcategories?.length === 0 && item?.animals?.length === 0)
    }>
    <Spacer position="bottom" size="large">
        <SubCategoryInfoCard subcategories={item} />
    </Spacer>
</TouchableOpacity>

这里利用了动物项不存在subcategories和animals属性的特点，!item.subcategories和!item.animals会同时为true，从而触发禁用。该方式更适合当前API结构明确的场景，若后续出现无这两个属性的分类项，可能会出现误判。

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