时间戳

首页 > 解决方案 > 无效调用挂钩错误，但挂钩似乎有效

react-native - 无效调用挂钩错误，但挂钩似乎有效

问题描述

我正在尝试使用useContext钩子，但出现错误 - Invalid hook call。我阅读了 React 网站上的文档，但这里似乎没有任何问题。尝试重新安装应用程序并得到相同的错误，所以我猜这不是缓存错误或任何类似性质的错误。这就是我所拥有的：

const customCard = (item: Item) => {

  const { theme } = useContext(ThemeContext);
  return(
     <View>
       .....
     </View>
  )
}

根据错误，问题const { theme }在行。我在其他文件中有这个确切的行并且它工作得很好，所以我不明白为什么在这个文件中会发生这种情况。

我在某处读到这可能是node_moduels导致此错误的重复，因此我再次删除node_modules，npm install但仍然无效。

该组件用于从带有平面列表的列表中呈现项目。

<FlatList
        showsVerticalScrollIndicator={false}
        style={{padding: 8}}
        data={items}
        renderItem={({item, index}) => customCard(items[index])}
        keyExtractor={item => item.id}
      />

标签： react-nativereact-hooks

解决方案

您必须在customCard使用 FlatList 组件的组件内部进行定义

您应该将 CustomCard 定义为一个单独的组件，否则它将认为它是一个函数，因为您无法在组件内定义组件。

const CustomCard = (item: Item) => {
  const { theme } = useContext(ThemeContext);
  return(
     <View>
       .....
     </View>
  )
}



const App () => {
  const items = [];
  return (
    <View style={styles.app}>
        <FlatList
            showsVerticalScrollIndicator={false}
            style={{padding: 8}}
            data={items}
            renderItem={({item}) => <CustomCard item={item}/>}
            keyExtractor={item => item.id}
        />
    </View>
  );
}

如果还有什么我可以澄清的，请告诉我。

推荐阅读