为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

明月笑刀无情 2022-09-23 16:59:04
目前,我正在使用此逻辑根据 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 查询钩子。这给了我一个无效的钩子调用错误。
查看完整描述

1 回答

?
jeck猫

TA贡献1909条经验 获得超7个赞

似乎你在无休止的递归中奔跑。

如果你调用你的渲染块,它会导致一个(通过)的渲染,所以再次被调用,依此类推,直到无限(或直到错误)。contactssetStatesetUserDatacontacts


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 72 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信