Question

我从主返回中调用contacts函数。直到这里我都看不到任何错误：

 const showContacts = React.useCallback(
    (data: UsersQueryHookResult) => {
      if (data) {
        return (
          <View style={styles.users}>
          </View>
        );
      }
    },
    [userData],
  );

  const contacts = () => {
    console.log('running');
    const { loading, error, data } = useUsersQuery({
      variables: {
        where: { id: 34 },
      },
    });
    console.log('DATA COMING', data);
    //setUserData(data);
    //console.log('contact name', data.users.nodes[0].userRelations[0].relatedUser.firstName);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Container style={{ flex: 1, alignItems: 'center' }}>
        <Item style={styles.addToWhitelist}>
          <Icon
            name="add"
            onPress={() => navigation.navigate('AddContactTry')}
          />

          <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()}
      </Container>
    </SafeAreaView>
  );
};

现在，我想根据contacts的结果进行一些条件渲染。但是，一旦取消注释setUserData(data);，我就会收到一个错误，那就是太多的重新渲染。在showUsers中，我没有发现我做错了什么，以得到此错误。

编辑：

我尝试了此操作，但给出了无效的挂接调用错误：

export const Whitelist: React.FunctionComponent = (props) => {

  const [userData, setUserData] = useState<UsersQueryHookResult>('');
 useEffect(() => {
    // Your function to fetch/get contacts
    const data = contacts();
    setUserData(data);
  }, [])

  const showContacts = React.useCallback(
    (data: UsersQueryHookResult) => {
      if (data) {
        return (
          <View style={styles.users}>
          </View>
        );
      }
    },
    [userData],
  );

  const contacts = () => {
    console.log('running');
    const { loading, error, data } = useUsersQuery({
      variables: {
        where: { id: 34 },
      },
    });
    console.log('DATA COMING', data);
    //setUserData(data);
  };



  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Container style={{ flex: 1, alignItems: 'center' }}>
        <Item style={styles.addToWhitelist}>
          <Icon
            name="add"
            onPress={() => navigation.navigate('AddContactTry')}
          />

          <Text style={styles.addToContactTitle}>Add contact</Text>
        </Item>
        <Text onPress={() => navigation.navigate('Home')}>Zurück</Text>
        {/* {contacts()} */}
      </Container>
    </SafeAreaView>
  );
};

Answer 1

尝试在componentDidMount方法或useEffect（对于您而言是带有钩子）中获取contacts，并将结果存储在useState状态下。

  const [contacts, setContacts] = React.useState(null);

  [...]

  React.useEffect(() => {
    // Your function to fetch/get contacts
    const data = contacts();
    setContacts(data);
  }, [])

  [...]

  return (
    <SafeAreaView style={{ flex: 1 }}>
      [...]
      {contacts && contacts.map(contact => (<View>{contact.name}</View>)}
      [...]
    </SafeAreaView>
  );

希望有帮助。

使用useState的渲染过多

1 个答案: