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

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

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

明月笑刀无情 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贡献1599条经验 获得超7个赞

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

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


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

添加回答

举报

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