React Native Invalid Hook Call错误：FlatList子组件使用useState报错

可能原因1：renderItem传递方式不符合规范 #

FlatList的renderItem属性要求接收一个返回React元素的函数，直接传递组件本身可能因上下文或参数传递问题触发Hook错误。

修复方法： #

改用箭头函数显式传递item参数：

<View style={styles.container}>
    <FlatList
        style={styles.flatList}
        data={interestGroupSampleData}
        renderItem={({item}) => <InterestGroupPostItem item={item} />}
        ListHeaderComponent={headerComponent}
    />
</View>

可能原因2：组件定义位置不符合Hook规则 #

Hooks仅允许在函数组件顶层或自定义Hook中调用，如果InterestGroupPostItem定义在类组件内部，或者嵌套在其他函数、条件判断里，就会触发错误。

修复方法： #

将InterestGroupPostItem移到类组件外部，或确保它定义在函数组件的顶层作用域中，不要嵌套在任何子逻辑里。

附带问题修复：缺失状态切换函数 #

你的代码中viewMorePress函数未定义，点击会触发额外报错，需补充该函数实现状态切换：

const InterestGroupPostItem=({item}) => {
    const [isDetailsVisible,setDetailsVisible] = useState(false)
    
    // 补充状态切换函数
    const viewMorePress = () => {
        setDetailsVisible(prevState => !prevState)
    }
    
    return (
        <View style={styles.flatListItemContainer}>
            <TouchableOpacity
                style={{ flex: 1 }}
                onPress={viewMorePress}>
                <View style={{ marginBottom: 5,paddingLeft: width * 0.02, }}>
                    <Text style={[styles.descriptionText]} numberOfLines={isDetailsVisible ? 0 : 2}>
                        {item.description}
                    </Text>
                </View>
                <Text style={[styles.seeMoreText]}>{isDetailsVisible ? 'See Less' : 'more'}</Text>
            </TouchableOpacity>
        </View>
    )
}

额外检查项 #

• 确认React与React Native版本兼容，版本不匹配可能导致Hook调用异常。
• 确保InterestGroupPostItem始终以组件形式渲染（即使用<InterestGroupPostItem />语法），不要作为普通函数直接调用。

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