当在我的 React 应用程序中深深嵌套的 React 组件中使用时，我的 React Hooks 失败了

Question

当我在这里使用useHistory hook ...

import React from 'react';
import {View,Image,StyleSheet, TouchableOpacity} from 'react-native';
import theme from '../theme';
import Text from './Text'
import {useQuery} from '@apollo/react-hooks'
import {GET_REPOSITORY} from '../graphql/queries'
import {useHistory} from 'react-router-native'

const RepositoryItem = (props) => {
    let history = useHistory()
    let item = props.item

    const styles = StyleSheet.create({
        ...
    });

    const reduceToK = (num) => {
        if (num > 999) {
            const thousandsNum = Math.round(num / 1000);
            const remainerNum = Math.round((num % 1000) / 100);
            return `${thousandsNum}.${remainerNum}k`;
        } else return num;
    };

    return (
        <View style={styles.rootContainer}>
            {...}
        </View>
    );
};

export default RepositoryItem;

应用程序中断并且returns出现以下错误...

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same app

这个组件 (RepositoryItem) 正在另一个组件 (RepositoryList) 中使用，就像这样...

import React from 'react';
import { FlatList, View, StyleSheet, Text } from 'react-native';
import RepositoryItem from './RepositoryItem';
// ...


const styles = StyleSheet.create({
  ...
});

const RepositoryList = () => {
  let history = useHistory()
  const repositories = useQuery(GET_REPOSITORIES, {fetchPolicy: 'cache-and-network'});

  if (!repositories.loading) {
    const ItemSeparator = () => <View style={styles.separator} />;
  
    // Get the nodes from the edges array
    const repositoryNodes = repositories.data.repositories && !repositories.loading
      ? repositories.data.repositories.edges.map(edge => edge.node)
      : [];
  
    return (
      <FlatList
        data={repositoryNodes}
        ItemSeparatorComponent={ItemSeparator}
        renderItem={RepositoryItem}
        keyExtractor={repository => repository.fullName}
      />
    );
  } else {
    return (<View><Text>Loading...</Text></View>);
  }

};

export default RepositoryList;

该组件正在 App 组件中使用。

我的理论是，在 React Native 的 FlatList renderItem prop 中不能使用 hooks。

知道这里可能有什么问题吗？

Answer 1

您可能想这样做，因为 renderItem 接受一个函数。

<FlatList
        data={repositoryNodes}
        ItemSeparatorComponent={ItemSeparator}
        renderItem={({item}) => <RepositoryItem item={item} />}
        keyExtractor={repository => repository.fullName}
      />

Answer 2

改变

import {useHistory} from 'react-router-native'

t0

import {useHistory} from 'react-router-dom'

基于react-router-native documentation

当在我的 React 应用程序中深深嵌套的 React 组件中使用时，我的 React Hooks 失败了

My react hooks fail when used inside my react component that is deeply nesed into my react application

reactjs

react-native

react-native-flatlist

react-component

react-hooks