Question

我正在尝试使用 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 的列表中呈现项目。

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

Answer 1

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

你应该将 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>
  );
}

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

无效的调用挂钩错误但挂钩似乎有效

1 个答案: