当数据移动到单独的组件时，重新呈现的次数过多

Question

目前，我正在使用此逻辑根据 grapqhl 查询的结果呈现数据。这工作正常：

 const contacts = () => {

    const { loading, error, data } = useUsersQuery({

      variables: {

        where: { id: 1 },

      },

    });

    if (data) {

      console.log('DATA COMING', data);

      const contactName = data.users.nodes[0].userRelations[0].relatedUser.firstName

        .concat(' ')

        .concat(data.users.nodes[0].userRelations[0].relatedUser.lastName);

      return (

        <View style={styles.users}>

          <View style={styles.item} key={data.users.nodes[0].id}>

            <Thumbnail

              style={styles.thumbnail}

              source={{

                uri:

                  'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/girl_avatar_child_kid-512.png',

              }}></Thumbnail>

            <Text style={styles.userName}>{contactName}</Text>

          </View>

        </View>

      );

    }

  };

  return (

    <SafeAreaView style={{ flex: 1 }}>

      <Container style={{ flex: 1, alignItems: 'center' }}>

        <Item style={styles.addToWhitelist}>

          <Icon name="add" onPress={() => navigation.navigate('AddContact')} />

          <Text style={styles.addToContactTitle}>Add contact</Text>

        </Item>

        <Text onPress={() => navigation.navigate('Home')}>Zurück</Text>

        <View style={{ width: moderateScale(350) }}>

          <Text>Keine Kontacte</Text>

        </View>

        {contacts()}

        {/* <ContactList data={userData}></ContactList> */}

      </Container>

    </SafeAreaView>

  );

};

但是，当我制作一个单独的组件时：

export const ContactList: React.FunctionComponent<UserProps> = ({

  data,

}) => {

  console.log('user called');

  if (!data) return null;

  console.log('DATA COMING', data);

      const contactName = data.users.nodes[0].userRelations[0].relatedUser.firstName

        .concat(' ')

        .concat(data.users.nodes[0].userRelations[0].relatedUser.lastName);

但是，这给了我太多的重新渲染问题。我错过了什么？可能是一些基本的东西。我也尝试过使用 useEffects，但我无法在其中运行 graphql 查询钩子。这给了我一个无效的钩子调用错误。

Answer 1

似乎你在无休止的递归中奔跑。如果你调用你的渲染块，它会导致一个（通过）的渲染，所以再次被调用，依此类推，直到无限（或直到错误）。contactssetStatesetUserDatacontacts