使用 useState 的重新渲染过多

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>
  );

希望对你有帮助。