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

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